點選按鈕，動態新增、刪除表格特定樣式的行列

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() {}
	});
});