如何独立切换同一表中的两行。目前我有两个主行,当我单击任何行时,每个主行都包含其他一些行,两个主行都被切换如何独立切换它们?
我的 HTML 和 javascript 是
<table id="sort">
<tr class="nodrag nodrop">
<td colspan=3><strong><a style="cursor:pointer;" class="toggle">Group 1</a></strong></td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
<tr id="1" class="tr_group" style='display:none;'>
<td style="width:10px;" class="dragHandle"> </td>
<td><a href=# style="margin-left: 20px;">Umair Iqbal</a></td>
<td><span style="font-size: 12px; color: #999; line-height: 100%;">A Student at TUM</span></td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
<tr id="2" class="tr_group" style='display:none;'>
<td style="width:10px;" class="dragHandle"> </td>
<td><a href=# style="margin-left: 20px;">Faryal Khan</a></td>
<td><span style="font-size: 12px; color: #999; line-height: 100%;">A Doctor at KMC</span></td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
<tr class="nodrag nodrop">
<td colspan=3><strong><a style="cursor:pointer;" class="toggle">Group 2</a></strong></td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
<tr id="1" class="tr_group" style='display:none;'>
<td style="width:10px;" class="dragHandle"> </td>
<td><a href=# style="margin-left: 20px;">Umair Iqbal</a></td>
<td><span style="font-size: 12px; color: #999; line-height: 100%;">A Student at TUM</span></td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
<tr id="2" class="tr_group" style='display:none;'>
<td style="width:10px;" class="dragHandle"> </td>
<td><a href=# style="margin-left: 20px;">Faryal Khan</a></td>
<td><span style="font-size: 12px; color: #999; line-height: 100%;">A Doctor at KMC</span></td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
</table>
jQuery是
<script>
$(".toggle").click(function () {
$(".tr_group").slideToggle('slow');
});
</script>