首頁 > 開發者 > JavaScript
js動態添加表格逐行添加、刪除、遍曆取值的執行個體代碼，js逐行
關於js對錶格進行逐行添加，今天抽空整理了一下：建立一個html檔案（沒有編輯器的可以建立一個demo.txt檔案，然後改尾碼名為demo.html），把下面代碼全部貼進去即可。
功能包括：表格添加一行，表格刪除一行，表格遍曆取值等。
點擊說明：點擊添加按鈕，則表格添加一行，可進行錄入，刪除按鈕，可刪除當前行，其他行不影響。刪除或者添加，每行的的編號都會自動變化，套餐和價格是<input/>，內容是
<textarea></textarea>,點擊儲存按鈕的時候，遍曆表格中所有行，把所有行的資料取出來彈框彈出展示，後期可根據需求傳遞到後台進行處理。
：
原始碼：
<!-- Creator： WangPeng CreateTime : 2018-01-25 去年今日此門中，人面桃花相映紅。 人面不知何處去，桃花依舊笑春風。--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>動態增加表格</title></head><style> td /*設定表格文字左右和上下置中對齊*/ { vertical-align: middle; text-align: center; padding: 9px; } textarea{ min-height: 60px; min-width: 200px; }</style><script type="text/javascript"> function del(obj){ if(document.getElementById('tbodyid').children.length>1){ var trid=obj.parentNode.parentNode.id; var objtr=document.getElementById(trid); document.getElementById('tbodyid').removeChild(objtr); var tbody=document.getElementById('tbodyid'); var countchildren=tbody.childElementCount; for (var i=0;i<countchildren;i++){ tbody.children[i].children[0].innerHTML=i+1; } } else{ alert("請不要全部刪除"); } } function add(){ var trid = new Date().getTime(); var packageid=trid+'packageid'; var countid=trid+'countid'; var priceid=trid+'priceid'; var objtr=document.createElement('tr'); objtr.id=trid; objtr.innerHTML="<td></td> " + " <td><input id='"+trid+"packageid'></td> " + " <td><textarea id='"+trid+"countid'></textarea></td> " + " <td><input id='"+trid+"priceid'></td> " + " <td><button type='button' onclick='del(this)'>刪除</button></td>"; document.getElementById("tbodyid").appendChild(objtr); var tbodyobj=document.getElementById('tbodyid'); var countchildren=tbodyobj.childElementCount; for (var i=0;i<countchildren;i++){ tbodyobj.children[i].children[0].innerHTML=i+1; } } function save(){ var tbodyobj=document.getElementById('tbodyid'); var countchildren=tbodyobj.childElementCount; var trid=""; var packageid=""; var countid=""; var priceid=""; var list=new Array(); for (var i=0;i<countchildren;i++){ trid=tbodyobj.children[i].id; packageid=trid+"packageid"; countid=trid+"countid"; priceid=trid+"priceid"; var map={ "套餐":document.getElementById(packageid).value, "內容":document.getElementById(countid).value, "價格":document.getElementById(priceid).value } list.push(map); } console.log("list:",list); alert(JSON.stringify(list)); }</script><body><div> <div style="width: 80%;margin: 10%"> <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%"> <caption>動態增加表格</caption> <thead> <tr> <th width="5% ">序號</th> <th width="20%">套餐</th> <th width="30%">內容</th> <th width="10%">價格</th> <th width="10%">操作</th> </tr> </thead> <tbody id="tbodyid"> <tr id="123"> <td>1</td> <td><input id="123packageid"></td> <td><textarea id="123countid"></textarea></td> <td><input id="123priceid"></td> <td><button type="button" onclick='del(this)'>刪除</button></td> </tr> </tbody> </table> <button type="button" onclick='add()'>添加</button> <button type="button" onclick='save()'>儲存</button></div></div></body></html>
js動態產生其他的也同理，可根據自己需要在指定位置建立自己所需要的元素。
總結
以上所述是小編給大家介紹的js動態添加表格逐行添加、刪除、遍曆取值的執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
