3

同じテーブルにある 2 つの行を個別に切り替えるにはどうすればよいですか。現在、2 つのメイン行があり、各メイン行には他の行が含まれています。任意の行をクリックすると、両方のメイン行が切り替えられます。どうすればそれらを個別に切り替えることができますか?

私の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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
4

1 に答える 1

0

クリックした要素に基づいて、tr要素の次のグループを選択します。

$(".toggle").click(function(){
    $(this).closest('tr').nextUntil(":not(.tr_group)").slideToggle('slow');
});
于 2012-05-30T15:47:36.973 に答える