如何使用javascript显示隐藏的表格行？

debugcn 发表于 Dev

拉胡尔

我有一个有 5 行的简单表格。第一行仅可见，最后 4 行隐藏。

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

当点击添加行时，第二行应该显示，所以没有，当点击删除行时，它应该隐藏最新的行，依此类推

约瑟

只需像这样找到第一个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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。