動態表格的實現
身爲一個後端，前端不是很精通，選擇使用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格式傳到後端，後端通過字符串處理，寫進數據庫