layui的表格可以动态添加行吗_Layui数据表格动态添加行的处理方式（原生HTML方式）...

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

解决步骤：

1、编写表格头部内容

信息项名称

信息项编码

信息项类型

信息项长度

是否为空

显示序号

是否共享

共享方式

是否公开

公开方式

操作

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

说明：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){

}