有的时候因为参数太多 无法 一一 创建 所有采用动态创建 自己遇到的一个实际情况今天写个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form demo</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css" media="all">
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.f {
float: left;
}
.f1 {
float: left;
width: 150px;
height: 23px;
}
.f2 {
float: left;
width: 90%;
height: 23px;
}
</style>
</head>
<body>
<blockquote class="layui-elem-quote">
<h2>动态表单 VX:Internetquant </h2>
<div class="layui-form layuimini-form">
<!-- <form action="" method="post"> -->
<div class="layui-form-item">
<table class='layui-table'>
<thead>
<tr>
<th>数据</th>
</tr>
</thead>
<tbody id="form_data">
<!-- <tr>
<td>
<p class="f">表单类型:</p>
<select name="input_type" lay-ignore class="f1 input_type">
<option value=""></option>
<option value="hidden">隐藏域</option>
<option value="select" selected>下拉</option>
<option value="radio">单选按钮</option>
<option value="text">文本</option>
<option value="textarea">多行文本</option>
<option value="file">上传</option>
<option value="none">非表单</option>
<option value="editor">富文本</option>
<option value="checkbox">复选框</option>
<option value="date">日期</option>
</select>
<p class="f">  变量名:</p>
<input name="name" value="solution_introduction" type="text"class="f1 name" />
<p class="f">  描述:</p>
<input name="description" value="解决方案介绍" type="text" class="f1 description" />
<br><br>
<p class="f">  参数数组:</p>
<input name="data" value='{"value":"123","class":"ffa"}' type="text" class="f2 data" />
</td>
</tr> -->
</tbody>
<tfoot></tfoot>
</table>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="autoform" onclick="form_save()">立即提交</button>
      
<button type="button" class="add_tr layui-btn">增加配置行</button>
</div>
<!-- </form> -->
</div>
</blockquote>
</body>
<script>
//初始化数据 有问题可以联系我 VX:Internetquant
var data ='[{"input_type":"select","name":"solution_introduction","description":"初始111","value":"123","class":"ffa","data":{"name":"xxx","value":"value"}},{"input_type":"text","name":"solution_introduction","description":"初始2222","value":"123","class":"ffa"}]';
console.log(data)
var data_array=JSON.parse(data);
for(let item in data_array){
var ini_select_data="";
var ini_input_type="";
var ini_name="";
var ini_description="";
var ss={};
for(let it in data_array[item]){
//console.log(it,'----',data_array[item][it])
if(it=="input_type"){ini_input_type=data_array[item][it];continue}
if(it=="name"){ini_name=data_array[item][it];continue}
if(it=="description"){ini_description=data_array[item][it];continue}
ss[it]=data_array[item][it];
}
//=========
var trx='';
if(ini_input_type=="hidden"){trx+='<option value="hidden" selected>隐藏域</option>';}else{trx+='<option value="hidden">隐藏域</option>';}
if(ini_input_type=="select"){trx+='<option value="select" selected>下拉</option>';}else{trx+='<option value="select">下拉</option>';}
if(ini_input_type=="radio"){trx+='<option value="radio" selected>单选按钮</option>';}else{trx+='<option value="radio">单选按钮</option>';}
if(ini_input_type=="text"){trx+='<option value="text" selected>文本</option>';}else{trx+='<option value="text">文本</option>';}
if(ini_input_type=="textarea"){trx+='<option value="textarea" selected>多行文本</option>';}else{trx+='<option value="textarea">多行文本</option>';}
if(ini_input_type=="file"){trx+='<option value="file" selected>上传</option>';}else{trx+='<option value="file">上传</option>';}
if(ini_input_type=="none"){trx+='<option value="none" selected>非表单</option>';}else{trx+='<option value="none">非表单</option>';}
if(ini_input_type=="editor"){trx+='<option value="editor" selected>富文本</option>';}else{trx+='<option value="editor">富文本</option>';}
if(ini_input_type=="checkbox"){trx+='<option value="checkbox" selected>复选框</option>';}else{trx+='<option value="checkbox">复选框</option>';}
if(ini_input_type=="date"){trx+='<option value="date" selected>日期</option>';}else{trx+='<option value="date">日期</option>';}
//=========
var tr_data=`<tr>
<td>
<p class="f">表单类型:</p>
<select name="input_type" lay-ignore class="f1 input_type">`+trx+`</select>
<p class="f">  变量名:</p>
<input name="name" value="`+ini_name+`" type="text"class="f1 name" />
<p class="f">  描述:</p>
<input name="description" value="`+ini_description+`" type="text" class="f1 description" />
<br><br>
<p class="f">  参数数组:</p>
<input name="data" value='`+JSON.stringify(ss)+`' type="text" class="f2 data" />
</td>
</tr>`;
$('.layui-table').append(tr_data);
}
function form_save(){
var form_array=[];
var trList = $("#form_data").children("tr");
for (var i=0;i<trList.length;i++) {
var tdArr = trList.eq(i).find("td");
var ss={};
ss.input_type=tdArr.eq(1).find(".input_type").val();
ss.name=tdArr.eq(1).find(".name").val();
ss.description=tdArr.eq(1).find(".description").val();
if(ss.name==""){
alert('序号'+i+1+'：变量名不能为空')
return;
}
try {
var data=JSON.parse(tdArr.eq(1).find(".data").val());
for(var [key,value] of Object.entries(data)){
//console.log(key,value)
if(key=="input_type"){continue}
if(key=="name"){continue}
if(key=="description"){continue}
ss[key]=value;
}
} catch(e) {
console.log('序号',i+1,'：参数数组异常', e.message)
alert('序号'+i+1+'：参数数组异常'+ e.message)
return;
}
form_array.push(ss);
}
console.log(form_array);
var cc=JSON.stringify(form_array); //字符串就可以提交使用了
console.log(cc);
console.log(JSON.parse(cc));
}
layui.use(['form', 'layer'], function () {
var form = layui.form, i
layer = layui.layer;
$ = layui.$;
$(function () {
$('.layui-table').attr({ 'lay-size': 'sm', 'lay-skin': 'line' })
$('.layui-table thead tr th:last').after("<th style=\"width: 80px;\">操作</th>")
$('.layui-table thead tr th:first').before("<th>序号</th>")
$('.layui-table tbody tr').each(function (i) {
$(this).find('td:first').before('<td>' + (i + 1) + '</td>')//渲染序号
$(this).find('td:last').after('<td> <button type="button" class="del_tr layui-btn layui-btn-danger layui-btn-sm">删除</button></td>')
})
//添加行
$('.add_tr').bind('click', function () {
var tbody_dom = $('.layui-table').find('tbody');
var newtr = tbody_dom.find('tr:last').clone();
var aa = tbody_dom.find('tr:last').after(newtr);
tbody_dom.find('tr').each(function (i) {
// tbody_dom.find('tr:eq(' + i + ') td:eq(1) input').attr(site_config[" + i + "][name]) //
// tbody_dom.find('tr:eq(' + i + ') td:eq(2) input').attr(site_config[" + i + "][title]) //
// tbody_dom.find('tr:eq(' + i + ') td:eq(3) select').attr(site_config[" + i + "][type]) //
tbody_dom.find('tr:eq(' + i + ') td:first').html(i + 1)//渲染序号
})
//新增行input重置为空
tbody_dom.find('tr:last td:eq(1) input').val('');
tbody_dom.find('tr:last td:eq(2) input').val('');
tbody_dom.find('tr:last td:eq(3) select').val('');
form.render();
})
//删除行
$('table.layui-table tbody').on('click', 'tr td .del_tr', function () {
var tbody_dom = $(this).parents('tbody');
var cnt = 0;
tbody_dom.find('tr').each(function (i) {
cnt++;
})
if (cnt <= 1) {
layer.alert('至少保留一行数据');
return false;
}
$(this).parents('tr').remove();
tbody_dom.find('tr').each(function (i) {
tbody_dom.find('tr:eq(' + i + ') td:first').html(i + 1)//渲染序号
})
})
})
});
</script>
</html>
