1. 程式人生 > >JavaScript動態建立表格

JavaScript動態建立表格

 請輸入行數: <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>

在這裡插入圖片描述