动态表格的实现

身为一个后端，前端不是很精通，选择使用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="<td ></td> " +"            <td><input  type='date' style='width:120px'></td> " +"            <td><input id='"+trid+"countid'></input></td> " +"            <td><select lay-filter='contrller1'  id='"+trid+"'><option value=''>科目名称</option><option value='食材成本'>食材成本</option><option value='干调成本'>干调成本</option> <option value='色拉油成本'>色拉油成本</option><option value='冻货成本'>冻货成本</option><option value='水果成本'>水果成本</option><option value='粮食成本'>粮食成本</option><option value='中厨酱料'>中厨酱料</option> <option value='鱼类成本'>鱼类成本</option><option value='牛蛙成本'>牛蛙成本</option><option value='酒水成本'>酒水成本</option><option value='牛蛙成本'>返箱款</option><option value='酒水成本'>搭赠</option></td>" +"            <td><p id='"+trid+"id'></td> " +" <td> <div class='search'><input id='input"+trid+"' type='text' placeholder='请输入' οnfοcus='showDiv(this)' οninput='filterP(this)'><div id='dataList"+trid +"' class='content' οnclick='pushInput(this)' style='display:none;'> <option value='白菜'>白菜</option><option value='金针菇'>金针菇</option><option value='红尖椒'>红尖椒</option><option value='黄彩椒'>黄彩椒</option> <option value='西芹'>西芹</option> <option value='大葱'>大葱</option> <option value='香葱'>香葱</option> <option value='香菜'>香菜</option> <option value='泰椒'>泰椒</option> <option value='杭椒'>杭椒</option> <option value='山药'>山药</option> <option value='黄瓜'>黄瓜</option> <option value='地瓜'>地瓜</option> <option value='油麦菜'>油麦菜</option> <option value='莲藕'>莲藕</option> <option value='青笋'>青笋</option><option value='干豆腐'>干豆腐</option><option value='黄豆芽'>黄豆芽</option>  <option value='圆葱'>圆葱</option><option value='鸡蛋'>鸡蛋</option><option value='土豆'>土豆</option> <option value='胡萝卜'>胡萝卜</option> <option value='净蒜'>净蒜</option><option value='姜'>姜</option><option value='大豆腐'>大豆腐</option><option value='鸭血'>鸭血</option> <option value='绿豆芽'>绿豆芽</option> <option value='鲜蘑'>鲜蘑</option> <option value='尖椒'>尖椒</option> <option value='绿美人椒'>绿美人椒</option> <option value='绿泰椒'>绿泰椒</option> <option value='茄子'>茄子</option> <option value='西蓝花'>西蓝花</option> <option value='青蒜'>青蒜</option> <option value='红薯粉'>红薯粉</option> <option value='玉米粒'>玉米粒</option> <option value='精盐'>精盐</option> <option value='味素'>味素</option> <option value='鸡精'>鸡精</option> <option value='白糖'>白糖</option> <option value='白醋'>白醋</option> <option value='保宁醋'>保宁醋</option> <option value='恒顺香醋'>恒顺香醋</option> <option value='蒜头粉'>蒜头粉</option> <option value='灯笼椒'>灯笼椒</option> <option value='花椒油'>花椒油</option> <option value='乌冬面'>乌冬面</option> <option value='魔芋丝'>魔芋丝</option> <option value='木耳'>木耳</option> <option value='东古酱油'>东古酱油</option> <option value='宽粉'>宽粉</option> <option value='卡夫奇妙酱'>卡夫奇妙酱</option> <option value='去皮花生'>去皮花生</option> <option value='白砂糖'>白砂糖</option> <option value='冰糖'>冰糖</option> <option value='沙拉酱'>沙拉酱</option> <option value='蓝莓酱'>蓝莓酱</option> <option value='干锅酱'>干锅酱</option> <option value='辣妹子'>辣妹子</option> <option value='蚝油'>蚝油</option> <option value='腐竹'>腐竹</option> <option value='香辣酱'>香辣酱</option> <option value='红糖'>红糖</option> <option value='美极鲜'>美极鲜</option> <option value='土豆粉'>土豆粉</option> <option value='调和油'>调和油</option> <option value='鸡汁'>鸡汁</option> <option value='白芝麻'>白芝麻</option> <option value='奶粉'>奶粉</option> <option value='麻辣鲜露'>麻辣鲜露</option> <option value='辣鲜露'>辣鲜露</option> <option value='炼乳'>炼乳</option> <option value='淀粉'>淀粉</option> <option value='红麻椒'>红麻椒</option> <option value='绿麻椒'>绿麻椒</option> <option value='三文治'>三文治</option> <option value='黄栀子'>黄栀子</option> <option value='葡萄干'>葡萄干</option> <option value='麻酱'>麻酱</option> <option value='白酒'>白酒</option> <option value='十三香'>十三香</option> <option value='胡椒粉'>胡椒粉</option> <option value='鲁花调和油'>鲁花调和油</option> <option value='色拉油'>色拉油</option> <option value='鱼豆腐'>鱼豆腐</option> <option value='墨鱼丸'>墨鱼丸</option> <option value='肥牛'>肥牛</option> <option value='小油条'>小油条</option> <option value='小馒头'>小馒头</option> <option value='情人果'>情人果</option> <option value='冰爽海草'>冰爽海草</option> <option value='椒麻鸡爪'>椒麻鸡爪</option> <option value='亲亲肠'>亲亲肠</option> <option value='培根'>培根</option> <option value='鸡翅（干锅）'>鸡翅（干锅）</option> <option value='大虾'>大虾</option> <option value='天景玉米'>天景玉米</option> <option value='鸡腿'>鸡腿</option> <option value='鲜花椒'>鲜花椒</option> <option value='五花肉'>五花肉</option> <option value='牛肉'>牛肉</option> <option value='毛肚'>毛肚</option> <option value='千层肚'>千层肚</option> <option value='黄喉'>黄喉</option> <option value='脑花'>脑花</option> <option value='鸡爪'>鸡爪</option> <option value='鸡胗'>鸡胗</option> <option value='午餐肉'>午餐肉</option> <option value='牛油'>牛油</option> <option value='鸭头'>鸭头</option> <option value='白条公鸡'>白条公鸡</option> <option value='扇贝'>扇贝</option> <option value='百叶'>百叶</option> <option value='鱿鱼'>鱿鱼</option> <option value='猪颈肉'>猪颈肉</option> <option value='干贝'>干贝</option> <option value='红糖糍粑'>红糖糍粑</option> <option value='猪腰'>猪腰</option> <option value='金钻奶油'>金钻奶油</option> <option value='西瓜'>西瓜</option> <option value='哈密瓜'>哈密瓜</option> <option value='香蕉'>香蕉</option> <option value='苹果'>苹果</option> <option value='梨'>梨</option> <option value='菠萝'>菠萝</option> <option value='柠檬'>柠檬</option> <option value='火龙果'>火龙果</option> <option value='圣女果（小柿子）'>圣女果（小柿子）</option> <option value='儿童饺子'>儿童饺子</option> <option value='手擀面'>手擀面</option> <option value='馒头'>馒头</option> <option value='花卷'>花卷</option> <option value='大饼子'>大饼子</option> <option value='糖三角'>糖三角</option> <option value='米粉'>米粉</option> <option value='饺子皮'>饺子皮</option> <option value='辣椒段'>辣椒段</option> <option value='藤椒油'>藤椒油</option> <option value='辣椒王'>辣椒王</option> <option value='小米辣'>小米辣</option> <option value='二荆条'>二荆条</option> <option value='海带'>海带</option> <option value='紫香菜'>紫香菜</option> <option value='皮蛋'>皮蛋</option> <option value='孜然粉'>孜然粉</option> <option value='冰粉'>冰粉</option> <option value='底料'>底料</option> <option value='酸菜'>酸菜</option> <option value='十三香酱'>十三香酱</option> <option value='白胡椒粉'>白胡椒粉</option> <option value='凉菜红油'>凉菜红油</option> <option value='麻椒面'>麻椒面</option> <option value='烧烤辣椒面'>烧烤辣椒面</option> <option value='高汤'>高汤</option> <option value='牛蛙料'>牛蛙料</option> <option value='烧烤撒料'>烧烤撒料</option> <option value='鸡油'>鸡油</option> <option value='油酥豆'>油酥豆</option> <option value='安多夫'>安多夫</option> <option value='小苏打'>小苏打</option> <option value='干油碟'>干油碟</option> <option value='5号辣子'>5号辣子</option> <option value='白卤二号'>白卤二号</option> <option value='五香卤'>五香卤</option> <option value='烤鱼红油'>烤鱼红油</option> <option value='烤鱼辣椒面'>烤鱼辣椒面</option> <option value='酱香酱'>酱香酱</option> <option value='蒜香酱'>蒜香酱</option> <option value='剁椒酱'>剁椒酱</option> <option value='泡菜'>泡菜</option> <option value='豆豉'>豆豉</option> <option value='香锅辣酱'>香锅辣酱</option> <option value='香锅酱香酱'>香锅酱香酱</option> <option value='豆瓣酱'>豆瓣酱</option> <option value='大油'>大油</option> <option value='牛蛙酱'>牛蛙酱</option> <option value='牛肉'>牛肉</option> <option value='烧烤鸡翅'>烧烤鸡翅</option> <option value='黑鱼片'>黑鱼片</option> <option value='龙利鱼'>龙利鱼</option> <option value='气泡酒'>气泡酒</option> <option value='薄荷糖'>薄荷糖</option> <option value='奶茶'>奶茶</option> <option value='小芋圆'>小芋圆</option> <option value='珍珠'>珍珠</option> <option value='五彩豆'>五彩豆</option> <option value='小红豆'>小红豆</option> <option value='爆爆珠'>爆爆珠</option> <option value='椰果'>椰果</option> <option value='桂花蜜'>桂花蜜</option> <option value='可可球'>可可球</option> <option value='百香果'>百香果</option> <option value='草莓'>草莓</option> <option value='奇异果'>奇异果</option> <option value='玉米泥'>玉米泥</option> <option value='黄桃'>黄桃</option> <option value='酸梅汁'>酸梅汁</option> <option value='清江鱼'>清江鱼</option> <option value='三道鳞'>三道鳞</option> <option value='江团'>江团</option> <option value='草鱼'>草鱼</option> <option value='黑鱼'>黑鱼</option> <option value='小龙虾'>小龙虾</option> <option value='牛蛙'>牛蛙</option> <option value='泉阳泉'>泉阳泉</option> <option value='雪碧'>雪碧</option> <option value='可乐'>可乐</option> <option value='可乐0°'>可乐0°</option> <option value='青岛优质'>青岛优质</option> <option value='青岛纯生'>青岛纯生</option> <option value='雪花干啤'>雪花干啤</option> <option value='雪花原汁麦'>雪花原汁麦</option> <option value='雪花勇闯天涯'>雪花勇闯天涯</option> <option value='加多宝'>加多宝</option> <option value='劲酒'>劲酒</option> <option value='江小白'>江小白</option> </div></div></td>" +"            <td><input id='"+trid+"priceid'></td> " +"            <td><input id='"+trid+"priceid'></td> " +"            <td><input id='"+trid+"priceid'></td> " +   "            <td><input id='"+trid+"priceid'></td> " +"            <td><input id='"+trid+"priceid'></td> " +"            <td><input id='"+trid+"priceid'></td> " +"            <td><input id='"+trid+"priceid'></td> " +"            <td><button type='button' οnclick='del(this)'>删除</button></td></div>";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<countchildren;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相关代码

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

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

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

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

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

动态表格的实现（layui动态表格实现）相关推荐

php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格某个字段不显示问题
表格是用layui数据表格的方法渲染方式渲染的大概这个样子 var table = layui.table;//执行渲染 table.render({elem: '#demo' //指定原始表格元素 ...
layui动态表格下拉菜单
解决layui动态表格内插入下拉菜单简单方法简单来讲就是在table.render里的done里获取该列表格创建select插入节点,再将res数据拼接上去.layuiselect模块加载进表格会被 ...
【第50、51天】jQuery基本知识，LayUI动态表格的学习
1 jQuery基础 1.1 原生DOM元素(JS元素)与jQuery元素为什么不是同一种元素?两者如何转换? 1.2 基本选择器在jQuery中的使用 1.3 四大核心函数 1.4 常用事件定义方式 ...
layui 表格组件中实现动态增加数据行的一种方式
layui 以界面简洁美观而吸引了不少开发人员,在使用table组件时,需要能编辑表格内容,动态增加数据行.编辑功能组件已支持.但动态增加数据行好像没有支持,网上提供的方式是,获得组件的数据集再加入一 ...
Layui数据表格中动态插入行插入下拉框
想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值.因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你 ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...
POI利用word模板动态生成word报表以及动态生成word表格
目录核心依赖动态表格测试类工具类动态数据测试类工具类核心依赖 <dependency><groupId>org.apache.poi</groupId&g ...
jquery实现动态表格项目（表格增加删除/全选/表格变色特效等功能）（附源码+javaWEB开发如果需要可以直接使用）
jquery实现动态表格项目(表格增加删除/全选/表格变色特效)
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

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

动态表格的实现

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

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

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

动态表格的实现（layui动态表格实现）相关推荐

最新文章

热门文章