使用jQuery顯示和隱藏子行

Question

我正在嘗試使用jQuery解決以下問題。 目前，我沒有任何有用的代碼可在此處發布。

• 最初，僅主行（類term1_master和term2_master ）應該是可見的。
• 通過單擊“顯示”鏈接，相關的行組應切換可見性（例如，按tr-class term1_master Show按鈕應顯示所有擁有class term1 tr-elements ）。
• 塊的數量不固定，還可能出現term3_master ， term4_master ...及其子項。

這是我的示例HTML代碼：

<table>
  <tr class="term1_master">
    <td>Master Row 1</td>
    <td><a href="">Show</a></td>
  </tr>
  <tr class="term1">
    <td>Sub Row 1</td>
    <td>Example</td>
  </tr>
  <tr class="term1">
    <td>Sub Row 2</td>
    <td>Example</td>
  </tr>
  <tr class="term1">
    <td>Sub Row 3</td>
    <td>Example</td>
  </tr>

  <tr class="term2_master">
    <td>Master Row 2</td>
    <td><a href="">Show</a></td>
  </tr>
  <tr class="term2">
    <td>Sub Row 1</td>
    <td>Example</td>
  </tr>
  <tr class="term2">
    <td>Sub Row 2</td>
    <td>Example</td>
  </tr>
  <tr class="term2">
    <td>Sub Row 3</td>
    <td>Example</td>
  </tr>
</table>

非常感謝您的幫助！

Answer 1

您完全不必使用單獨的類，所有主行都可以具有一個.master類。 然后，您可以使用出色的nextUntil（）方法來獲取所需的內容：

$('a').click(function(e) {
    e.preventDefault();
    if($(this).text()=='Show') {
        $(this).closest('.master').nextUntil('.master').show();
        $(this).text('Hide');
    }
    else {
        $(this).closest('.master').nextUntil('.master').hide();
        $(this).text('Show');
    }
});

演示：

 $('a').click(function(e) { e.preventDefault(); if($(this).text()=='Show') { $(this).closest('.master').nextUntil('.master').show(); $(this).text('Hide'); } else { $(this).closest('.master').nextUntil('.master').hide(); $(this).text('Show'); } }); 

 tr { display:none; } tr.master { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="master"> <td>Master Row 1</td> <td><a href="">Show</a></td> </tr><tr class="term1"> <td>Sub Row 1</td> <td>Example</td> </tr><tr class="term1"> <td>Sub Row 2</td> <td>Example</td> </tr><tr class="term1"> <td>Sub Row 3</td> <td>Example</td> </tr> <tr class="master"> <td>Master Row 2</td> <td><a href="">Show</a></td> </tr><tr class="term2"> <td>Sub Row 1</td> <td>Example</td> </tr><tr class="term2"> <td>Sub Row 2</td> <td>Example</td> </tr><tr class="term2"> <td>Sub Row 3</td> <td>Example</td> </tr> <tr class="master"> <td>Master Row 3</td> <td><a href="">Show</a></td> </tr><tr class="term3"> <td>Sub Row 1</td> <td>Example</td> </tr><tr class="term3"> <td>Sub Row 2</td> <td>Example</td> </tr><tr class="term3"> <td>Sub Row 3</td> <td>Example</td> </tr> </table> 

Answer 2

您可以在相關點擊處理程序中使用以下邏輯，以僅顯示特定的目標關注行，具體取決於相關類：

$(function() { // ready handler
  $('table a').on('click', function(e) {
    e.preventDefault();
    var $tr = $(this).closest('tr');
    var trClass = $tr.attr('class').split('_').shift();
    $tr.nextAll('.' + trClass).show();
  })
});

-jsFiddle-

Answer 3

以下內容適用於當前HTML，並將term3_master，term4_master ...及其子項附加到后面。

 $(function() { $('tr').not('[class$="_master"]').hide(); $('table a').on('click', function(e) { e.preventDefault(); if($(this).text() === "Show") { $(this).text("Hide"); var $tr = $(this).closest('tr'); var trClass = $tr.attr('class').split('_').shift(); $tr.nextAll('.' + trClass).show(); } else { $(this).text("Show") var $tr = $(this).closest('tr'); var trClass = $tr.attr('class').split('_').shift(); $tr.nextAll('.' + trClass).hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="term1_master"> <td>Master Row 1</td> <td><a href="#">Show</a></td> </tr><tr class="term1"> <td>Sub Row 1</td> <td>Example</td> </tr><tr class="term1"> <td>Sub Row 2</td> <td>Example</td> </tr><tr class="term1"> <td>Sub Row 3</td> <td>Example</td> </tr> <tr class="term2_master"> <td>Master Row 2</td> <td><a href="#">Show</a></td> </tr><tr class="term2"> <td>Sub Row 1</td> <td>Example</td> </tr><tr class="term2"> <td>Sub Row 2</td> <td>Example</td> </tr><tr class="term2"> <td>Sub Row 3</td> <td>Example</td> </tr> </table>