动态表格的实现（layui动态表格实现）

动态表格的实现

身为一个后端，前端不是很精通，选择使用X-admin的一个框架，在layui的表格添加中，是一个弹出框的形式实现的。

就是这样的，实际需要的像动态表格那个录入的表格。
花费了很长时间用js实现了在layui框架中的动态表格，以及表格内数据的读入。

1.前端不好，对于表格的样式用的还是layui框架的，这个影响不大

重点是增加一行数据，删除一行数据
代码如下

function add(){
     
    var trid = new Date().getTime();
    var shop = document.getElementById("kemu").innerText;
    var gy = document.getElementById("gys").value;
    var dk = document.getElementById("dk").value;
    var packageid=trid+'packageid';
    var countid=trid+'countid';
    var priceid=trid+'priceid';
    var nameid = trid + 'nameid';
		
    var objtr=document.createElement('tr');
    objtr.id=trid;
    objtr.innerHTML=" " +
        "             " +
        "             " +
        "            科目名称食材成本干调成本 色拉油成本冻货成本水果成本粮食成本中厨酱料 鱼类成本牛蛙成本酒水成本返箱款搭赠" +
        "            
 " +
        "  
 白菜金针菇红尖椒黄彩椒 西芹 大葱 香葱 香菜 泰椒 杭椒 山药 黄瓜 地瓜 油麦菜 莲藕 青笋干豆腐黄豆芽  圆葱鸡蛋土豆 胡萝卜 净蒜姜大豆腐鸭血 绿豆芽 鲜蘑 尖椒 绿美人椒 绿泰椒 茄子 西蓝花 青蒜 红薯粉 玉米粒 精盐 味素 鸡精 白糖 白醋 保宁醋 恒顺香醋 蒜头粉 灯笼椒 花椒油 乌冬面 魔芋丝 木耳 东古酱油 宽粉 卡夫奇妙酱 去皮花生 白砂糖 冰糖 沙拉酱 蓝莓酱 干锅酱 辣妹子 蚝油 腐竹 香辣酱 红糖 美极鲜 土豆粉 调和油 鸡汁 白芝麻 奶粉 麻辣鲜露 辣鲜露 炼乳 淀粉 红麻椒 绿麻椒 三文治 黄栀子 葡萄干 麻酱 白酒 十三香 胡椒粉 鲁花调和油 色拉油 鱼豆腐 墨鱼丸 肥牛 小油条 小馒头 情人果 冰爽海草 椒麻鸡爪 亲亲肠 培根 鸡翅（干锅） 大虾 天景玉米 鸡腿 鲜花椒 五花肉 牛肉 毛肚 千层肚 黄喉 脑花 鸡爪 鸡胗 午餐肉 牛油 鸭头 白条公鸡 扇贝 百叶 鱿鱼 猪颈肉 干贝 红糖糍粑 猪腰 金钻奶油 西瓜 哈密瓜 香蕉 苹果 梨 菠萝 柠檬 火龙果 圣女果（小柿子） 儿童饺子 手擀面 馒头 花卷 大饼子 糖三角 米粉 饺子皮 辣椒段 藤椒油 辣椒王 小米辣 二荆条 海带 紫香菜 皮蛋 孜然粉 冰粉 底料 酸菜 十三香酱 白胡椒粉 凉菜红油 麻椒面 烧烤辣椒面 高汤 牛蛙料 烧烤撒料 鸡油 油酥豆 安多夫 小苏打 干油碟 5号辣子 白卤二号 五香卤 烤鱼红油 烤鱼辣椒面 酱香酱 蒜香酱 剁椒酱 泡菜 豆豉 香锅辣酱 香锅酱香酱 豆瓣酱 大油 牛蛙酱 牛肉 烧烤鸡翅 黑鱼片 龙利鱼 气泡酒 薄荷糖 奶茶 小芋圆 珍珠 五彩豆 小红豆 爆爆珠 椰果 桂花蜜 可可球 百香果 草莓 奇异果 玉米泥 黄桃 酸梅汁 清江鱼 三道鳞 江团 草鱼 黑鱼 小龙虾 牛蛙 泉阳泉 雪碧 可乐 可乐0° 青岛优质 青岛纯生 雪花干啤 雪花原汁麦 雪花勇闯天涯 加多宝 劲酒 江小白 

" + " " + " " + " " + " " + " " + " " + " " + " 删除

"; document.getElementById("tbodyid").appendChild(objtr); var tbodyobj=document.getElementById('tbodyid'); var countchildren=tbodyobj.childElementCount; var form = layui.form; form.render(); for (var i=0;i;i++){ tbodyobj.children[i].children[0].innerHTML=i+1; tbodyobj.children[i].children[9].innerHTML=shop; tbodyobj.children[i].children[11].innerHTML=dk; tbodyobj.children[i].children[10].innerHTML=gy; } }

这有很多是我自己的项目中的东西，讲解一下思路，在表格中的每一行都需要有自己这一行的id，方便下面的遍历表格数据。可以将这个表格转化为一个类似于数组的存在。为了方便理解，放上html相关代码

  "tbodyid">
                                    
                                    "1">
                                      "id">1 
                                        "date"> "width: 120px;" type="date">
                                        "restaurantname">"text" value="1">
                                        "contrller1" name="contrller" id="kemu" οnclick="">
                                        	"">科目名称
                                        "食材成本">食材成本
                                        "干调成本">干调成本
                                        "色拉油成本">色拉油成本
                                        "冻货成本">冻货成本
                                        "水果成本">水果成本
                                        "粮食成本">粮食成本
										"中厨酱料">中厨酱料 
									    "鱼类成本">鱼类成本
										"牛蛙成本">牛蛙成本
										"酒水成本">酒水成本
										"返箱款">返箱款
										"搭赠">搭赠
                                        
                                         
"kemuid">
                                         
                                        
                                      
"search">
  "input1" type="text" placeholder="请输入" οnfοcus="showDiv(this)" οninput="filterP(this)">
  
"dataList1" class="content" οnclick="pushInput(this)" style="display:none;">

个人觉得将需求转化为自己的数据，那么事情就好处理了

原理就是通过js的innerhtml添加
删除也雷同

除了添加删除外，还有数据读取

上面为每一行根据时间而分配的id，这样方便我们对其进行遍历，放到二维数组中，然后以字符串的形式，或者json格式传到后端，后端通过字符串处理，写进数据库