JS實現簡單的表格增刪
阿新 • • 發佈:2020-01-18
本文例項為大家分享了JS實現表格增刪的具體程式碼,供大家參考,具體內容如下
描述:
JS——實現簡單的表格增刪。
效果:
實現:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--4、編號:文字框 書名:文字框 作者:文字框 出版社:文字框 新增按鈕 表格 編號 書名 作者 出版社 刪除--> </head> <body> <div 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> </div> <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",{ textAlign: "center",border: "1px solid #000000" }); th.textContent=bookData[i]; } } function clickHandler() { var tr = $c("tr",{ 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。