使用jquery切换嵌套表

Question

在.NET MVC项目中，搜索会生成一个包含标题和未知行数的表。这些行中的每一行都会隐藏一个嵌套表格，其中包含标题和未知数量的行。我想单击相应的行时嵌套表展开。

到目前为止，我有这样的：

<script> 
    $('div.ordergrid table.orders tbody tr.row td').click(
    function() { 
     $(this).parent().parent().children('tr.rowdetail').toggle(); 
    } 
) 
</script> 

<div id="ordergrid"> 

    <table id="orders"> 
     <thead> 
      <th>Foo</th> 
      <th>Foo</th> 
      <th>Foo</th> 
      <th>Foo</th> 
      <th colspan="3">Foo</th> 
      <th>Foo</th> 
     </thead> 
    @foreach (var mo in Model) 
    { 
     <tbody> 
      <tr class="row"> 
       <td>Bar</td> 
       <td>Bar</td> 
       <td>Bar</td> 
       <td>Bar</td> 
       <td colspan="3">Bar</td> 
       <td>Bar</td> 
      </tr> 
      <tr class="rowdetail"> 
       <td colspan="8"> 
        <table> 
         <thead> 
          <th>Baz</th> 
          <th>Baz</th> 
          <th>Baz</th> 
          <th>Baz</th> 
          <th>Baz</th> 
          <th>Baz</th> 
          <th>Baz</th> 
          <th>Baz</th> 
         </thead> 
         <tbody> 
          <tr> 
           <td>1</td> 
           <td>2</td> 
           <td>3</td> 
           <td>4</td> 
           <td>5</td> 
           <td>6</td> 
           <td>7</td> 
           <td>8</td> 
          </tr> 
         </tbody> 
        </table> 
       </td> 
      </tr> 
      </tbody> 
    } 

    </table> 
</div> 

（嵌套TBODY稍后将与其他的foreach代替。）

目前，什么都不会发生在点击。点击事件似乎没有“粘”到预期的控制。

哦，.parent().parent()看起来有点傻，但我不确定如何正确选择.parents()。

Answer 1

从给出的HTML，你可以做这样的

$('.row').click(function() { 
    $(this).next('tr').toggle(); 
}); 

当点击与class="row"一行时，它会得到下一行（which'll被隐藏的，如果你的结构是正确的）并切换其可见性。

或者你可以使用稍微更具体的选择，

$('tr.row').click(function() { 
    $(this).next('tr.rowdetail').toggle(); 
}); 

这将获得与rowdetail类和切换它的可视性的下一个元素。在给出的示例结构中，两者都会执行相同的操作，但是与您的选择器相关的特定结果通常会导致难以预料的结果。在这种情况下，您的具体内容取决于您网页的其他内容是什么样子。

Answer 2

我想你正在寻找的是

$('div.ordergrid table.orders tr.row > td').click(function() { 
    $(this).closest('tr.row').next('tr.rowdetail').toggle(); 
}) 

你需要切换.rowdetails排它旁边的点击.row行

Answer 3

你的选择似乎是错的，你正在使用类选择，而不是的id选择器，需要使用“＃”。你也可以使用next（）函数选择相邻的tr。

$('div#ordergrid table#orders tbody tr.row td').click(
    function() { 
     $(this).parent().next('tr.rowdetail').toggle(); 
    } 
);