如何建立表格,建立行和列
阿新 • • 發佈:2019-01-03
如何建立表格,建立行和列
行: <input type="text" id="row" /> 列: <input type="text" id="col" /> <button id="btn">建立</button> <div id="wrap"> <!-- <table> <tr> <td></td> </tr> </table> --> </div> <script type="text/javascript"> function $(id){ return document.getElementById(id); } $("btn").onclick=function(){ $("wrap").innerHTML=""; var rows=$("row").value; var cols=$("col").value; var oTable=document.createElement("table"); oTable.border=2; oTable.style.width="300px"; oTable.style.height="300px"; for(var i=0;i<rows;i++){ var oTr=document.createElement("tr"); for(var j=0;j<cols;j++){ var oTd=document.createElement("td"); oTr.appendChild(oTd); } console.log(rows.value) var endTd=document.createElement("td"); endTd.innerHTML="<a href='javascript:;'>刪除</a>"; oTr.appendChild(endTd); oTable.appendChild(oTr); } $("wrap").appendChild(oTable); var as=document.querySelectorAll("a"); for(var i=0;i<as.length;i++){ as[i].onclick=function(){ if(confirm("你確定刪除嗎")){ this.parentNode.parentNode.remove(); if(oTable.children.length==0){ oTable.remove(); } } } } } </script>
當點選按鈕的時候,獲取輸入框中填入的行和列的值,建立表格,並給表格新增樣式
迴圈行和列數,建立行,然後建立列,並把列新增到行裡面
再把行新增到表格裡,這樣才能形成一個完整的
表格。