溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關JavaScript中怎么實現表格增刪操作，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
實現：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><!--4、編號：文本框書名：文本框作者：文本框出版社：文本框添加按鈕表格編號 書名 作者 出版社 刪除--></head> <body> <p id="all"> <p>編 號：<input type="text" class="in"></p> <p>書 名：<input type="text" class="in"></p> <p>作 者：<input type="text" class="in"></p> <p>出版社 ：<input type="text" class="in"></p> <p> <input type="button" value="添加" id="tj"> <input type="button" value="清除" id="cle"> </p> </p> <script> var ins,tj,qc,tab,all; var bookData=["編號","書名","作者","出版社","刪除"]; init(); function init() { all=document.getElementById("all"); ins=document.getElementsByClassName("in"); tj=document.getElementById("tj"); qc=document.getElementById("cle"); del=document.getElementById("del"); tj.addEventListener("click",clickHandler); qc.addEventListener("click",clickQcHandler); creatTable(); } function creatTable() { tab = $c("table", all, { width:"500px", borderCollapse:"collapse" }); for (var i = 0; i < ins.length+1; i++) {//購物車表單數據賦值 var th = $c("th", tab, { textAlign: "center", border: "1px solid #000000" }); th.textContent=bookData[i]; } } function clickHandler() { var tr = $c("tr", tab, { textAlign: "center", border: "1px solid #000000" }); for (var i = 0; i < ins.length+1; i++) {//購物車表單數據賦值 var td = $c("td", tr, {//列的創建 textAlign: "center", border: "1px solid #000000" }); if(i<ins.length){ td.textContent = ins[i].value; } else if(i==ins.length){ var del=$c("button", td); del.textContent="刪除"; del.addEventListener("click",clickDelHandler); } } } function clickDelHandler(e) {//刪除 一行 this.parentNode.parentNode.remove(); } function clickQcHandler(e) {//清除 全部 tab.remove(); creatTable(); } function $c(type,parent,style) { var elem=document.createElement(type); if(parent) parent.appendChild(elem); for(var key in style){ elem.style[key]=style[key]; } return elem; } </script> </body></html>
上述就是小編為大家分享的JavaScript中怎么實現表格增刪操作了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
