layui动态添加input_Layui数据表格动态添加行的处理方式（原生HTML方式）

项目需求：动态的增加表格行数据，并且单元格允许支持下拉框。

解决步骤：

1、编写表格头部内容

---

添加信息项(共0项)

信息项名称信息项编码信息项类型信息项长度是否为空显示序号是否共享共享方式是否公开公开方式操作

保存

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 = "是否";

var IsShareHtml = "是否";

var ShareTypeHtml = "有条件无条件";

var IsPublicHtml = "是否";

var PublicTypeHtml = "有条件无条件";

var result = "

"+

"

"+

"

"+

"

"+

"

"+

"

"+IsNullHtml+"

"+

"

"+

"

"+IsShareHtml+"

"+

"

"+ShareTypeHtml+"

"+

"

"+IsPublicHtml+"

"+

"

"+PublicTypeHtml+"

"+

"

删除"+

"

";

this.trNum++;

this.count++;

$("#count").text(this.count);

return result;

},

TR_ROW:function(trNum,trHtml){

}

}

说明：

1)HTable.DEL_TR是直接绑定到标签中，亦可考虑动态绑定的方式。

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

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 = "是否";

var IsShareHtml = "是否";

var ShareTypeHtml = "有条件无条件";

var IsPublicHtml = "是否";

var PublicTypeHtml = "有条件无条件";

var result = "

"+

"

"+

"

"+

"

"+

"

"+

"

"+IsNullHtml+"

"+

"

"+

"

"+IsShareHtml+"

"+

"

"+ShareTypeHtml+"

"+

"

"+IsPublicHtml+"

"+

"

"+PublicTypeHtml+"

"+

"

删除"+

"

";

this.trNum++;

this.count++;

$("#count").text(this.count);

return result;

},

TR_ROW:function(trNum,trHtml){

}