Question

我正在尝试创建一个在某些行下显示详细（隐藏）信息的表。单击所述行时，表行应显示在单击的行下方。

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

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

单击奇数行时，应在其下方弹出hist行。但是，只显示第一行。我不知道如何让它与多个隐藏的行一起工作。

以下是我的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();
    });

您可以清楚地看到，您可以查看多个课程。

Answer 2

$(this).nextAll("tr.hist").toggle(); // for all subsequent

$(this).nextUntil(":not(tr.hist)").toggle();  // for subsequent adjacent

Answer 3

您可以使用jQuery的nextUntil函数执行此操作，如下所示：http://jsfiddle.net/zSAdR/1/

<强>更新

我使用您提供的HTML编辑了我的jsFiddle。它可以工作，但您应该考虑在.hist行中插入一些空的表格单元格，或者至少使用colspan属性来避免表格分开。

http://jsfiddle.net/zSAdR/9/

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

3 个答案: