javascript - 如何防止所有表行同时切换

Question

我正在尝试创建一个表格来显示特定行下方的详细(隐藏)信息。单击所述行时，表格行应显示在单击的行下方。

目前我在一个类中有显示的行，在一个类中有隐藏的行。

$("#report tr.odd").click(function(){
    $(this).next("tr.hist").toggle();
});

单击奇数行时，历史行应在其下方弹出。但是，仅显示第一行。我不确定如何让它与多个隐藏行一起使用。

这是我的 HTML 的一部分:

` 选择 电缆 ＃ 来源 目的地 修改的 地点

    <tr class="odd">
            <td align="center"><input name="selectThis[]" type="checkbox" value="7435" id="selectThis[]"/></td>
            <td align="center" >bE4&nbsp;</td>
            <td align="left">5B04&nbsp;</td>
            <td>JOHN'S PC / RM. 58&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
    </tr>

    <tr class="odd">                
            <td align="center"><input name="selectThis[]" type="checkbox" value="7436" id="selectThis[]"/></td>
            <td align="center" >bE5&nbsp;</td>
            <td align="left">5B05&nbsp;</td>
            <td>BRAD'S PC / RM. 58&nbsp;</td>
            <td>&nbsp;</td><td>&nbsp;</td>
     </tr>

     <tr class="odd">                
            <td align="center"><input name="selectThis[]" type="checkbox" value="7437" id="selectThis[]"/></td>
            <td align="center" >bE6&nbsp;</td>
            <td align="left">5B06&nbsp;</td>
            <td>JAMES' PC / RM. 58&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
     </tr>

     <tr class='odd'>                
            <td align="center"><input name="selectThis[]" type="checkbox" value="7438" id="selectThis[]"/></td>
            <td align="left" >&nbsp;<span style='cursor:pointer'><left><img src='images/arrow.png'></left></span>&nbsp;&nbsp;&nbsp;bE7&nbsp;</td>
            <td align="left">5B07&nbsp;</td>
            <td>JR'S PC / RM. 58&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
     </tr>

     <tr class='hist'>
            <td>video</td>
            <td>Bob Dylan</td>
     </tr>

     <tr class='hist'>
            <td>video</td>
            <td>Bob Dylan</td>
     </tr>

     <tr class='hist'>
            <td>video</td>
            <td>Bob Dylan</td>
     </tr>

     <tr class='hist'>
            <td>audio</td>
            <td>Bob Dylan</td>
     </tr>
     <tr class='odd'>
            <td align="center"><input name="selectThis[]" type="checkbox" value="1663" id="selectThis[]"/></td>
            <td align="left" >&nbsp;<span style='cursor:pointer'><left><img src='images/arrow.png'></left></span>&nbsp;&nbsp;&nbsp;V7&nbsp;</td>
            <td align="left">Bob Dylan&nbsp;</td>
            <td>Highway 61 Revisited&nbsp;</td>
            <td>12/05/2011&nbsp;</td>
            <td>&nbsp;</td>
     </tr>

     <tr class='hist'>
            <td>video</td>
            <td>Bob Dylan</td>
     </tr>
     <tr class='hist'>
            <td>video</td>
            <td>Bob Dylan</td>
      </tr>

      <tr class='hist'>
          <td>video</td>
          <td>Bob Dylan</td>
      </tr>

 </body>

更多信息

我该如何修改:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">  
    $(document).ready(function(){
        $("#report tr:not(.odd)").hide();
        $("#report tr.odd").show();

        $("#report tr.odd").click(function(){
            $(this).next("tr.hist").toggle();
        });
    });
</script>    

所以我让它下面的所有 HIST 行都显示出来，而不仅仅是第一行？

Answer 1

查看nextUntil()函数...

    $("#report tr.odd").click(function(){
        $(this).nextUntil("tr.odd, tr.even").toggle();
    });

如您所见，您可以检查多个类。