前端框架layui

方式一：

 <table class="layui-table"  lay-filter="addTable" id="addTable">
     
 <button id="addField" class="layui-btn layui-btn-normal" type="button" lay-filter="addField">添加字段</button>
     
 <button id="reduceField" class="layui-btn layui-btn-normal" type="button" lay-filter="reduceField">减少字段</button>

 table.render({
         elem: ‘#addTable‘ ,
         url: Feng.ctxPath + ‘/reorganizeTemplate/getJson‘,// 返回的是2行空白的json，目的是初始化表格用
         page: false,
         cellMinWidth: 100,
         cols: [
             [
             {field: ‘id‘, align:‘center‘, title: ‘序号‘},
             {field: ‘fieldName‘, align:‘center‘, edit: ‘text‘, title: ‘字段名称‘},
             {field: ‘fieldType‘, align:‘center‘, edit: ‘text‘, title: ‘字段类型‘},
             ]
             ]
     });
 ?
 $(‘#addField‘).on(‘click‘, function(){
         table.reload(‘addTable‘,{
             url:Feng.ctxPath + ‘/reorganizeTemplate/kAdd‘,// 新增一行空白的json
         });
     });
 ?
 $(‘#reduceField‘).on(‘click‘, function(){
     table.reload(‘addTable‘,{
         url:Feng.ctxPath + ‘/reorganizeTemplate/kReduce‘,// 删除一行空白的json
     });
 });

// 获取表格内所有数据，定义变量接收
var str = JSON.stringify(table.cache)
// 后端用String接收，然后解析json即可

 ?

效果图

总结：

优点：动态渲染表格，可以直接编辑表格内容，

缺点：每次添加或者减少字段，表格都会重载，如果提前填写了数据会消失

前端样式调用后端接口，不推荐使用！ 纯娱乐！

建议：使用动态拼接tr td的方式，把样式都提前定义好

实现动态表格拼接

原文：https://www.cnblogs.com/hippo-dolphin/p/15161059.html