动态添加表格并增加Jquery校验
一、背景
最近项目需求在某个页面需要动态添加表格行数（单行），同时能够提供JQuery校验（没听错，前后端不分离的，也就是 JSP）。由此记录下，方便日后使用。
二、实现
var i=1; //Jquery校验自行在需要校验的地方添加即可 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 () { //循环tab tbody下的tr $(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++; }); }//在原表格中需要添加同样的
