JQuery toggle() требуется только строка таблицы

Question

У меня есть таблица, созданная из петли php, так что Toggled row имеет тот же класс. Когда я щелкнул, чтобы показать детали одной записи, она переключается на все остальные записи.

Это немного запутанно. Поэтому я попытался создать здесь jsfiddle.

<table border=1px> 
<tr> 
    <td>MR A</td><td><a class='showit' href='#'>2 records</a></td> 
</tr> 
<tr class='details'> 
    <td colspan='2'>record 1....</td> 
</tr> 
<tr class='details'> 
    <td colspan='2'>record 2....</td> 
</tr> 
<tr> 
    <td>MR B</td><td><a class='showit' href='#'>1 records</a></td> 
</tr> 
<tr class='details'> 
    <td colspan='2'>record 1....</td> 
</tr> 

</table> 
<script> 
$(document).ready(function(){ 
$(".details").hide(); 
$(".showit").click(function(){ 
    $(".details").toggle(); 
}); 
}); 
</script> 

Проблема заключается в том, что когда я нажимаю, чтобы показать записи мР А также показать записи мР B. Есть ли решение для этого? Большое спасибо ...

Answer 1

Вы можете захватить строку, которая была нажата, и получить все последующие строки, которые имеют детали класса:

$(".showit").click(function(){ 
    $(this).closest("tr") // Retrieves the tr that was clicked 
      .nextUntil(":not(.details)") // Gets all the following tr's that have the detail class 
      .toggle(); 
}); 

Обновлено скрипки: http://jsfiddle.net/bxfw05s5/1/