项目需求：动态的增加表格行数据，并且单元格允许支持下拉框。
解决步骤：
1、编写表格头部内容
<hr class="layui-bg-green">
<div class="layui-form-item">
<div class="layui-input-inline">
<a class="layui-btn layui-btn-sm add_tr_btn"><i class="layui-icon"></i>添加信息项(共<cite id="count">0</cite>项)</a>
</div>
</div>
<form class="layui-form res_field_form">
<div class="layui-form-item">
<table class="layui-table" lay-filter="resTable" id="resTable">
<thead>
<tr>
<th>信息项名称</th>
<th>信息项编码</th>
<th>信息项类型</th>
<th>信息项长度</th>
<th>是否为空</th>
<th>显示序号</th>
<th>是否共享</th>
<th>共享方式</th>
<th>是否公开</th>
<th>公开方式</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<a class="layui-btn add_res_btn">保存</a>
</div>
</form>2、编写动态生成数据行的JS代码，使用拼接HTML方式，具体逻辑可参考代码。（此方法比较繁琐，亦可用其他方式）
$(document).ready(function(){
layui.use(['jquery','table','form'], function(){
var table = layui.table,
$ = layui.jquery,
form = layui.form;
//添加行按钮
$(".add_tr_btn").click(function(){
var tableRow = HTable.ADD_TR(HTable.trNum);
var trObj = $("#resTable").children('tbody').find('tr');
var tbody = $("#resTable").find('tbody');
tbody.append(tableRow);
form.render();
});
//保存按钮
$(".add_res_btn").click(function(){
//var json = $(".res_field_form").serializeJSON();
var result = $(".res_field_form").parseFormJSON();
alert(JSON.stringify(result));
});
});
});
//定义HTable对象
window.HTable = {
trNum:1,
count:0,
DEL_TR:function(trNum){
$("#tr"+trNum).remove();
this.trNum--;
if(this.trNum==0){
this.trNum=1;
}
this.count--;
if(this.count<0){
this.count=0;
}
$("#count").text(this.count);
},
ADD_TR:function(trNum){
var IsNullHtml = "<select name='fieldIsNull'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var IsShareHtml = "<select name='fieldIsShare'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var ShareTypeHtml = "<select name='fieldShareType'><option value='CONDITION' selected>有条件</option><option value='UNCONDITION'>无条件</option></select>";
var IsPublicHtml = "<select name='fieldIsPublic'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var PublicTypeHtml = "<select name='fieldPublicType'><option value='CONDITION' selected>有条件</option><option value='UNCONDITION'>无条件</option></select>";
var result = "<tr id='tr"+trNum+"'>"+
"<td><div class='layui-iput-inline'><input type='text' name='fieldName' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='fieldCode' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='fieldType' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='fieldLength' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'>"+IsNullHtml+"</div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='fieldSort' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'>"+IsShareHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+ShareTypeHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+IsPublicHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+PublicTypeHtml+"</div></td>"+
"<td><a class='layui-btn layui-btn-sm layui-btn-danger' onclick='HTable.DEL_TR("+trNum+")'>删除</a></td>"+
"</tr>";
this.trNum++;
this.count++;
$("#count").text(this.count);
return result;
},
TR_ROW:function(trNum,trHtml){
}
}说明：
1）HTable.DEL_TR是直接绑定到<a>标签中，亦可考虑动态绑定的方式。
2）HTable对象中主要定义了增加行、删除行方法，并且以当前行的Index作为参数。
3）暂未考虑现实序号，由于动态选择删除行，需要重新绘制序号，增加了额外工作量，所以仅在顶部展示目前以增加的数量。
3、将动态表格中的数据行转成JSON数组的形式提交到后台。
//原生JS的方式实现构建JSON数组
$.fn.parseFormJSON = function (){
var result = [];
var json = {};
var data = this.serializeArray();
if(data.length==0){
return [];
}else{
for(var i=0; i<data.length; i++){
var key = data[i].name;
var value = data[i].value;
if(json.hasOwnProperty(key)){//当存在是
result.push(json);
//var newJson = {};
json = {};//
json[key] = value;
}else{
json[key] = value;
if(i==data.length-1){
result.push(json);
}
}
}
}
return result;
};说明：1）可使用原生的JS方式实现组装成JSON数组；2）亦可以参考jquery.serializeJSON的实现方式，但此种方式提交的数据为JSON对象，需要到后台再进行一次转换才行。
ADD_TR:function(trNum){
var IsNullHtml = "<select name='["+trNum+"][fieldIsNull]'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var IsShareHtml = "<select name='["+trNum+"][fieldIsShare]'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var ShareTypeHtml = "<select name='["+trNum+"][fieldShareType]'><option value='CONDITION' selected>有条件</option><option value='UNCONDITION'>无条件</option></select>";
var IsPublicHtml = "<select name='["+trNum+"][fieldIsPublic]'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var PublicTypeHtml = "<select name='["+trNum+"][fieldPublicType]'><option value='CONDITION' selected>有条件</option><option value='UNCONDITION'>无条件</option></select>";
var result = "<tr id='tr"+trNum+"'>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldName]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldCode]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldType]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldLength]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'>"+IsNullHtml+"</div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldSort]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'>"+IsShareHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+ShareTypeHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+IsPublicHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+PublicTypeHtml+"</div></td>"+
"<td><a class='layui-btn layui-btn-sm layui-btn-danger' onclick='HTable.DEL_TR("+trNum+")'>删除</a></td>"+
"</tr>";
this.trNum++;
this.count++;
$("#count").text(this.count);
return result;
},
TR_ROW:function(trNum,trHtml){
}