jQuery给表格动态添加或删除行列

点击按钮，动态添加、删除表格特定样式的行列

1. 点击**“+”则添加行，点击“-”**则删除行（针对多行）
2. 实现效果图
   
3. 实现

$.addTrTd = function(i){
	var rowPost ='<tr>'+
	'<td class="w25-10" colspan="2">岗位名称</td>'+
	'<td class="w25-10" colspan="2"><input id="jobname'+i+'" name="jobname'+i+'" type="text" lay-verType="tips" autocomplete="off" class="layui-input"></td>'+
	'<td class="w25-10" colspan="2">岗位职责</td>'+
	'<td class="w25-10" colspan="2"><input id="jobresponsiblity'+i+'" name="jobresponsiblity'+i+'" type="text" lay-verType="tips" autocomplete="off" class="layui-input"></td>'+
	'</tr>';
	var rowRequire ='<tr>'+
	'<td colspan="2">专业要求</td>'+
	'<td colspan="2"><input id="professionalrequirements'+i+'" name="professionalrequirements'+i+'" type="text" lay-verType="tips" autocomplete="off" class="layui-input"></td>'+
	'<td colspan="2">学历要求</td>'+
	'<td colspan="2"><input id="education'+i+'" name="education'+i+'" type="text" lay-verType="tips" autocomplete="off" class="layui-input"></td>'+
	+'</tr>';
	var rowRecruit = '<tr>'+
	'<td colspan="2">招聘日期</td>'+
	'<td colspan="2"><input id="recruitmentdate'+i+'" name="recruitmentdate'+i+'" type="text" lay-verType="tips" autocomplete="off" class="layui-input"></td>'+
	'<td>招聘人数</td>'+
	'<td><input type="text" id="numberofrecruits'+i+'" name="numberofrecruits'+i+'" lay-verType="tips" autocomplete="off" class="layui-input"></td>'+
	'<td>见习月数</td>'+
	'<td><input type="text" id="probationmonths'+i+'" name="probationmonths'+i+'" lay-verType="tips" autocomplete="off" class="layui-input"></td>'
	+'</tr>'
	var row = '<tr>'+'<td colspan="8"></td>'+'</tr>';
	$("#probationPlanTable tr:last").after(row);
	$("#probationPlanTable tr:last").after(rowPost);
	$("#probationPlanTable tr:last").after(rowRequire);
	$("#probationPlanTable tr:last").after(rowRecruit);
}

• 添加和删除

$("#addProbationPlan").click(function(){
	var i=$('#probationPlanTable tr').length/4-1;
	i++; 
	$.addTrTd(i);
});
$("#delProbationPlan").click(function(){
	var delIndex =  $('#probationPlanTable tr').length; 
	if(delIndex>4){
		var answer =window.confirm("您确定要删除吗？");  
		if(answer)  {
		for(var i=1;i<5;i++){
			document.getElementById("probationPlanTable").deleteRow(delIndex-i);
		}
	}
}	

• 页面加载

/*页面加载*/
$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "${pageContext.request.contextPath}/***/***" ,
		dataType: "json",
		cache: false,
		async: false,
		success : function(data) {
	        //根据数据库的数据添加行数
	        if(data.unitProbationPlanVo.length>1){
		        for(var j=1;j<data.unitProbationPlanVo.length;j++){
		            $.addTrTd(j);
	             }
	         }
	    },
		complete : function(XMLHttpRequest, textStatus) {},
		ifModified : false,
		error : function() {}
	});
});