jquery动态增加删减表格行特效

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

html代码：

   
   
   

     


  
ID
  
起止时间
  
单位/部门
  
职位
  


     
     


  

    
  
  

    
  
  

    
  
  

    
  
  

    
  

     
   
 

js代码：

$(function () {
      var show_count = 20;  //要显示的条数
      var count = 1;  //递增的开始值，这里是你的ID
      $("#btn_addtr").click(function () {
 
 var length = $("#dynamicTable tbody tr").length;
 //alert(length);
 if (length < show_count)  //点击时候，如果当前的数字小于递增结束的条件
 {
   $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");  //在表格后面添加一行
   changeIndex();//更新行号
 }
      });
 
 
    });
    function changeIndex() {
      var i = 1;
      $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
 $(this).find("input[name='NO']").val(i++);//更新行号
      });
    }
 
    function deltr(opp) {
      var length = $("#dynamicTable tbody tr").length;
      //alert(length);
      if (length <= 1) {
 alert("至少保留一行");
      } else {
 $(opp).parent().parent().remove();//移除当前行
 changeIndex();
      }
    }

希望本文所述对大家学习javascript成程序设计有所帮助。