js实现为表格table动态新增行删除行功能

function addtr(){
   //i为当前表格最后一行数 + 1 ,为新增的一行标识第几行

function addtr(){
   //i为当前表格最后一行数 + 1 ,为新增的一行标识第几行
    var i = parseInt($('table tr:last').children("td").eq(0).find("input").val()) + 1;
    console.log("lasttr:"+i);
    //不可以用当前表格行数做新增行的标识,因为会出现标识重复问题
    /*var i = $('#para_table').find('tr').length - 1;
    console.log("trrr"+i);*/
    var table = $("#para_table");
    var tr= $("<tr>" +
        "<td>\n" +
      "     <input value='"+i+"' hidden='hidden'>\n" +
        "       <div class=\"input-group\">\n" +
        "           <input id='listZpgx"+i+".gxbh' name='listZpgx["+i+"].gxbh' class=\"form-control\" type=\"text\" readonly='readonly'>\n" +
        "           <span class=\"input-group-btn\">\n" +
        "                 <button class=\"btn btn-default\" type=\"button\" onclick=\"selectJbgx(this)\">\n" +
        "                         ..\n" +
        "                 </button>\n" +
        "           </span>\n" +
        "        </div>\n" +
        "</td>"+
        "<td>\n" +
        "       <div class=\"input-group\">\n" +
        "           <input id='listZpgx"+i+".gxmc' name='listZpgx["+i+"].gxmc' class=\"form-control\" type=\"text\" readonly='readonly'>\n" +
        "           <span class=\"input-group-btn\">\n" +
        "                 <button class=\"btn btn-default\" type=\"button\" onclick=\"selectJbgx(this)\">\n" +
        "                         ..\n" +
        "                 </button>\n" +
        "           </span>\n" +
        "        </div>\n" +
        "</td>"+
        "<td><input id='listZpgx"+i+".jldw' name='listZpgx["+i+"].jldw    Type' class='form-control' type='text' readonly='readonly'></td>"+
        "<td><input id='listZpgx"+i+".gxdj' name='listZpgx["+i+"].gxdj' class='form-control' type='text' readonly='readonly'></td>"+
        "<td><input id='listZpgx"+i+".jgqty' name='listZpgx["+i+"].jgqty' class='form-control' type='text'></td>"+
        "<td><input id='listZpgx"+i+".wcqty' name='listZpgx["+i+"].wcqty' class='form-control' type='text'></td>"+
        "<td><input id='listZpgx"+i+".syqty' name='listZpgx["+i+"].syqty' class='form-control' type='text'></td>"+
        "<td><input id='listZpgx"+i+".bmbh' name='listZpgx["+i+"].bmbh' class='form-control' type='text' readonly='readonly'></td>"+
        "<td></td>"+
        "<td align='center' onclick='deletetr(this)'><button type='button' class='btn btn-warning btn-sm' >"+"删除"+"</button></td></tr>");
    table.append(tr);
}

function deletetr(tdobject){
    var td=$(tdobject);
    td.parents("tr").remove();
}

实现难点在于如何准确的标识新增行，即控件的name,id的下标，用于封装数组传送给后台，标识不出现重复即可解决。起初我想用表格当前行数-1作为标识，但进行连续新增删除行操作时，会出现标识重复问题。后来想到用最后一行的标识+1，可以避免标识可能出现重复的问题。

删除行的话，直接做页面删除表格行的动态效果，不减去被删除行的标识。

每行控件的标识准确不重复目的在于准确的实现数据传递给后台。