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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26975307/article/details/81019265

一、背景

最近项目需求在某个页面需要动态添加表格行数（单行），同时能够提供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++;
	});
}//在原表格中需要添加同样的