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

最新推荐文章于 2024-07-10 22:37:56 发布

qq_43014162

最新推荐文章于 2024-07-10 22:37:56 发布

阅读量2.6k

点赞数

分类专栏： layui+Springboot 文章标签： js java

本文链接：https://blog.csdn.net/qq_43014162/article/details/104857098

版权

layui+Springboot 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

动态表格的实现

身为一个后端，前端不是很精通，选择使用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;">