JavaScript動態建立表格
阿新 • • 發佈:2018-12-19
請輸入行數: <input type="text" value="3" id="rows"> <br> 請輸入列數: <input type="text" value="4" id="cols"> <br> <input type="button" value="生成" id="ok"> <input type="button" value="清除" id="del"> <div id="box"></div> <script> var box = document.getElementById("box"); var ok = document.getElementById("ok"); var del = document.getElementById("del"); var oTable = document.createElement("table"); ok.onclick = function () { var cols = document.getElementById("cols").value; var rows = document.getElementById("rows").value; 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); oTd.innerHTML = "第"+i+"行第"+j+"列"; } oTable.appendChild(oTr); box.appendChild(oTable); } }; del.onclick = function () { oTable.innerHTML = ""; } </script>