效果图
**功能描述:**点击新增按钮,该table之后新增一个同样的table,点击删除按钮删除当前table,只有一个时不能再删除。
html模板内容
<table border="1" class="layui-table">
<tr>
<td>问题描述</td>
<td>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 40px;">
<button id="add-question-btn" type="button"
class="layui-btn layui-btn-sm layui-btn-radius"
onclick="addQuestion(this)">
<i class="layui-icon"></i>新增
</button>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline" style="width: 40px;">
<button id="del-question-btn_0" type="button"
class="layui-btn layui-btn-sm layui-btn-radius"
onclick="checkDelQuestion(this)">
<i class="layui-icon"></i>删除
</button>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align: center">问题<span style="color: red">*</span></td>
<td>
<div class="layui-form-item">
<div class="layui-input-block">
<input id="question_0" name="questionTitle" type="text" style="padding-left: 0;" class="layui-input" />
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align: center">问题描述<span style="color: red">*</span></td>
<td>
<div class="layui-form-item">
<div class="layui-input-block">
<input id="questionDescription_0" name="questionDescription" type="text" class="layui-input"/>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align: center">附件上传</td>
<td>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-block" style="width:800px">
<input id="questionFileCode_0" name="questionFileCode" type="text" readonly
placeholder="" autocomplete="off" class="layui-input" hidden>
<input id="questionFileName_0" name="questionFileName" type="text" readonly
placeholder="" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-inline">
<button id="question_upload_0" name="question_upload_btn" type="button"
class="layui-btn layui-btn-sm layui-btn-radius">
<i class="layui-icon"></i>上传附件
</button>
</div>
</div>
</td>
</tr>
</table>
js代码
// 新增方法
function addQuestion(obj) {
var table = $(obj).parent().parent().parent().parent().parent().parent();
var newTable = table.clone();
// 清空新table
newTable.find(":input").each(function(){
$(this).val("");
});
table.after(newTable);
// 遍历html中该name值的所有input标签,并设置标签的id属性值
$("input[name='questionTitle']").each(function (i) {
$(this).attr("id","question_"+i);
});
$("input[name='questionDescription']").each(function (i) {
$(this).attr("id","questionDescription_"+i);
});
$("input[name='questionFileCode']").each(function (i) {
$(this).attr("id","questionFileCode_"+i);
});
$("input[name='questionFileName']").each(function (i) {
$(this).attr("id","questionFileName_"+i);
});
$("button[name='question_upload_btn']").each(function (i) {
$(this).attr("id","question_upload_"+i);
// 初始化每个table的上传附件按钮
initSimpleUpload("question_upload_"+i, "consultOrder-form", "questionFileCode_" + i, "questionFileName_"+i);
});
$("button[id='del-question-btn_0']").each(function (i) {
$(this).attr("id","del-question-btn_"+i);
});
}
// 删除方法
function checkDelQuestion(obj) {
var arr = obj.id.split("_");
if(arr[1] == 0){
layer.alert("该行已是第一行,无法删除!")
return false;
}else{
$(obj).parent().parent().parent().parent().parent().parent().remove();
// 删除后重新遍历,给html的input的id属性赋值
$("input[name='questionTitle']").each(function (i) {
$(this).attr("id","question_"+i);
});
$("input[name='questionDescription']").each(function (i) {
$(this).attr("id","questionDescription_"+i);
});
$("input[name='questionFileCode']").each(function (i) {
$(this).attr("id","questionFileCode_"+i);
});
$("input[name='questionFileName']").each(function (i) {
$(this).attr("id","questionFileName_"+i);
});
$("button[name='question_upload_btn']").each(function (i) {
$(this).attr("id","question_upload_"+i);
initSimpleUpload("question_upload_"+i, "consultOrder-form", "questionFileCode_" + i, "questionFileName_"+i);
});
$("button[id='del-question-btn_0']").each(function (i) {
$(this).attr("id","del-question-btn_"+i);
});
}
}
// 遍历获取多个table中的值
function getQuestionArrayData(type) {
if(type == 1){
$("input[name='questionTitle']").each(function () {
questionTitleStrArr.push($(this).val());
});
$("input[name='questionDescription']").each(function () {
questionDescriptionStrArr.push($(this).val());
});
$("input[name='questionFileCode']").each(function () {
questionFileCodeStrArr.push($(this).val());
});
$("input[name='questionFileName']").each(function () {
questionFileNameStrArr.push($(this).val());
});
} else {
$("input[name='questionTitle2']").each(function () {
questionTitleStrArr.push($(this).val());
});
$("input[name='questionDescription2']").each(function () {
questionDescriptionStrArr.push($(this).val());
});
$("input[name='questionFileCode2']").each(function () {
questionFileCodeStrArr.push($(this).val());
});
$("input[name='questionFileName2']").each(function () {
questionFileNameStrArr.push($(this).val());
});
}
}
上传附件方法 initSimpleUpload() 参考我另一篇博客:
layui上传多个附件且能删除附件