动态添加表格并增加Jquery校验

最近项目需求在某个页面需要动态添加表格行数（单行），同时能够提供JQuery校验（没听错，前后端不分离的，也就是 JSP）。由此记录下，方便日后使用。

var i=1;

var str2='<tr><th>1</th><td class="table-col-1"><div class="pl10">1099</div></td><td><input type="text" class="pl10" value="2018-05-20"></td><td><input type="text" class="pl10" value="2018-05-20"></td><th><div class="pl10"><a href="" class="t-del">删除</a></div></th></tr>'

var str1='<tr><th><input type="text" id="NO"></th><td class="table-col-1"><input id="name" type="text" name="zlry['+i+'].ryxm" class="pl10" ></td><td><div><select name="zlry['+i+'].rygjdq" id="gj"><option value=""></option> </select></div></td><td><div><select id="lx" name="zlry['+i+'].zjlx" id=""><option value="" selected="">中国</option><option value="">国家2</option><option value="">国家3</option></select></div></td><td><input type="text" class="pl10" name="zlry['+i+'].ryzjhm" id="hm"></td><th><a href="" class="t-del">删除</a></th></tr>';

function addTr(sel,html){

    $(sel).click(function(e){

    e.preventDefault();

console.log($(this).prev());

$(this).parent().prev().find('tbody').append(html);

changeIndex();

$('.t-del').on("click",function(e){

e.preventDefault();

    $(this).parents("tr").remove();

        })

    })

}

addTr('.str1 .inner .add a',str1);

addTr('.str2 .inner .add a',str1)

addTr('.str3 .inner .add a',str1)

addTr('.Rent-and-time .inner .add a',str2)

function changeIndex() {

var count = 0;

$(".str1 .inner tbody tr").each(function () {

    $(this).find("input[id='NO']").val(count+1);

    $(this).find("select[id='gj']").attr("name","zlry["+count+"].rygjdq");

    $(this).find("input[id='name']").attr("name","zlry["+count+"].ryxm");

    $(this).find("select[id='lx']").attr("name","zlry["+count+"].ryzjlx");

    $(this).find("input[id='hm']").attr("name","zlry["+count+"].ryzjhm");

    count++;

});

}