如何使用JavaScript顯示隱藏的表格行？

Question

我有一個5行的簡單表。 第一行僅可見，最后四行隱藏。

<table> 
  <tr> 
   <th>sr</th> 
   <th>Head</th>
  </tr> 
 <tr style="display:block;"> 
   <td>1</td> 
   <td>row 1</td> 
 </tr > 
<tr style="display:none;"> 
   <td>2</td> 
  <td>row 2</td> 
 </tr> 
<tr style="display:none;"> 
   <td>3</td> 
  <td>row 3</td> 
 </tr> 
 <tr style="display:none;"> 
   <td>4</td> 
  <td>row 4</td> 
 </tr> 
 <tr style="display:none;"> 
   <td>5</td> 
  <td>row 5</td> 
 </tr> 
 </table>
 <button id="add">Add row</button>
 <button>Remove row</button>

javascript我嘗試過的

$('#add').click(function() {
rows.show();
});

單擊添加行時，第二行應顯示，因此不顯示；單擊刪除行時，應隱藏最新的行，依此類推

Answer 1

檢查以下代碼是否有效！

我添加了ID以添加和刪除按鈕。

$('#btnAdd').click(function () { 
  $("table tr:hidden:first").show();
});

$('#btnRemove').click(function () {
   if($("table tr:visible").length !== 2) {
     $("table tr:visible:last").hide();
   }
});

Answer 2

只需使用以下內容找到第一個hidden tr ，然后找到最后一個visible tr

 $(document).on('click','#add',function(){ $('table tbody').find('tr:hidden:first').show(); }); $(document).on('click','#remove',function(){ $('table tbody').find('tr:visible:last:not(:first-child)').hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>sr</th> <th>Head</th> </tr> <tbody> <tr style="display:block;"> <td>1</td> <td>row 1</td> </tr > <tr style="display:none;"> <td>2</td> <td>row 2</td> </tr> <tr style="display:none;"> <td>3</td> <td>row 3</td> </tr> <tr style="display:none;"> <td>4</td> <td>row 4</td> </tr> <tr style="display:none;"> <td>5</td> <td>row 5</td> </tr> </tbody> </table> <button id="add">Add row</button> <button id="remove">Remove row</button> 

Answer 3

您可以使用此jQuery函數查找隱藏的tr：

var hiddenTRs = $("tr:hidden");

那么您可以通過以下方式展示它們：

hiddenTRs.first().show();

Answer 4

純jQuery解決方案

您可以更改按鈕

<button data-action="add">Add row</button>
<button data-action="remove">Remove row</button>

現在您可以使用此腳本

$(document).ready(function() { 
  $('button[data-action]').on('click', function() {

    // which button is pressed?
    if ($(this).data('action') == 'add') {

      // show 'tr' of all 'td'
      $('table td').parent().css('display', 'block');
    } else {

      // hide'tr' of all 'td'
      $('table td').parent().css('display', 'none');
    }
  });
});

自舉解決方案

更改表格行

<tr style="height: 0px;"> 
  <td>5</td> 
  <td>row 5</td>
</tr>

現在你可以使用這個

$(document).ready(function() { 
  $('button[data-action]').on('click', function() {

    // which button is pressed?
    if ($(this).data('action') == 'add') {

      // show 'tr' of all 'td'
      $('table td').parent().collapse('show');
    } else {

      // hide'tr' of all 'td'
      $('table td').parent().collapse('hide');
    }
  });
});