有的时候因为参数太多 无法 一一 创建 所有采用动态创建 自己遇到的一个实际情况今天写个例子
<!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, ilayer = 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>
