使用jquery切換嵌套表

在.NET MVC項目中，搜索會生成一個包含標題和未知行數的表。這些行中的每一行都會隱藏一個嵌套表格，其中包含標題和未知數量的行。我想單擊相應的行時嵌套表展開。使用jquery切換嵌套表

到目前爲止，我有這樣的：

<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()。

來源

2014-02-18 Christofer Ohlsson

您是否看到錯誤？如果您只是在click事件上使用console.log，會發生什麼情況？如果可行，請嘗試記錄'.parent（）。parent（）。children（'tr.rowdetail'）'返回的內容。它是否返回任何/正確的元素？另外，在將click元素綁定到DOM時，DOM中是否存在這些元素？如果沒有，請查看https://api.jquery.com/on/。 –

從給出的HTML，你可以做這樣的

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

當點擊與class="row"一行時，它會得到下一行（which'll被隱藏的，如果你的結構是正確的）並切換其可見性。

或者你可以使用稍微更具體的選擇，

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

這將獲得與rowdetail類和切換它的可視性的下一個元素。在給出的示例結構中，兩者都會執行相同的操作，但是與您的選擇器相關的特定結果通常會導致難以預料的結果。在這種情況下，您的具體內容取決於您網頁的其他內容是什麼樣子。

來源

2014-02-18 08:57:03 MLeFevre

與Wilmer的建議非常相似，這些導致「Bar」行在獲得點擊時重複，而嵌套表始終顯示。所以我猜想HTML中有什麼不對？ –

@ChristoferOlsson聽起來很喜歡它。我注意到的其他東西，''＆''標籤應該在foreach循環之外（因爲您只需要一個tbody用於您的表） – MLeFevre

不要說那個評論，我一定會感到困惑。你的解決方案的工作，我只是認爲子表將默認崩潰:) –

我想你正在尋找的是

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

你需要切換.rowdetails排它旁邊的點擊.row行

來源

2014-02-18 08:47:51

你的選擇似乎是錯的，你正在使用類選擇，而不是的id選擇器，需要使用「＃」。你也可以使用next（）函數選擇相鄰的tr。

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

來源

2014-02-18 08:51:23 Wilmer

請你可以擴展這個：而不僅僅是給代碼，解釋它在做什麼，爲什麼它解決了這個問題！ –

啊，是的。我完全混淆了類和ID。此建議切換* something *，但它使外部tr（「Bar」）切換其自身的副本，而內部表仍然展開。 –

哦，等等，它不會自我複製，而只是提取下一個訂單。 –

使用jquery切換嵌套表

回答

相關問題