点击按钮查看更多的JS代码实现方法

时间:2021-11-23
类别:教程 - 网页设计

点击按钮查看更多,循环全部隐藏或显示jquery, each(function(i){})

页面上有10行,但我默认只显示5行,点击查看更多后,另外5行才显示出来,怎么实现呢 

实现方法的JS代码如下 

注意,需要先引入jq插件

  1. <tr  id="tr" style="display:none">       
  2.   <td >第一行</td> 
  3.   </tr> 
  4.   <tr  id="tr" style="display:none">         
  5.   <td >第二行</td> 
  6.   </tr> 
  7.  
  8.   <tr><td><span id="more">查看更多</span></td></tr> 
  9.  
  10.  
  11.   <script> 
  12.       $("#more").click(function(){ 
  13.   $("tr[id='tr']").each(function(i){ 
  14. $(this).show();//hide(); 
  15. });  
  16. }); 
  17. </script> 
    收藏