jquery实现表格行的动态增加和删除

        $("#Addmaterial").click(function () {//Addmaterial是增加按钮的ID
               
            $("#tab tr").attr("align","center");
            $("#materialDetails").show();
            var _len = $("#tab tr").length;        
            $("#tab").append("<tr id="+_len+" align='center'>"
                                +"<td>"+_len+"</td>"
                                +"<td>Dynamic TR"+_len+"</td>"
                                +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
                                +"<td><a href=\'#\' οnclick=\'deltr("+_len+")\'>删除</a></td>"
                           +"</tr>");            
        });


var deltr =function(index)
   {
       var _len = $("#tab tr").length;
       $("tr[id='"+index+"']").remove();//删除当前行
       for(var i=index+1,j=_len;i<j;i++)
        {
           var nextTxtVal = $("#desc"+i).val();
            $("tr[id=\'"+i+"\']")
                .replaceWith("<tr id="+(i-1)+" align='center'>"
                               +"<td>"+(i-1)+"</td>"
                               +"<td>Dynamic TR"+(i-1)+"</td>"
                              +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
                               +"<td><a href=\'#\' οnclick=\'deltr("+(i-1)+")\'>删除</a></td>"
                            +"</tr>");
        }    
       
   }

 

转载于:https://www.cnblogs.com/shenghaishiweini/p/3160182.html