点击按钮,动态添加、删除表格特定样式的行列
- 点击**“+”则添加行,点击“-”**则删除行(针对多行)
- 实现效果图
- 实现
$.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() {}
});
});