如何使用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这样的

＆＃13;

＆＃13;

$(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();

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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');
    }
  });
});

Bootstrap解决方案

更改表格行

<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');
    }
  });
});