JavaScript中動態(tài)生成表格

動態(tài)生成表格，首先需要輸入并獲取動態(tài)的數(shù)字，html中結構代碼如下：

    行：<input type="text" id="row" value="5"><br>
        列：<input type="text" id="col" value="10"><br>
        <button id="btn">生成</button>
        <div id="box"></div> <!--存放動態(tài)生成的表格-->


html結構寫好之后，我們就需要寫js代碼，讓其動態(tài)生成表格。js代碼如下：

    $("#btn").onclick = function () {
                var _col = $("#col").value,//獲取列
                    _row = $("#row").value;//獲取行
                var _table = document.createElement("table");//創(chuàng)建表格
                for(var i = 0;i<_row;i++){
                    var _tr = document.createElement("tr");//創(chuàng)建行
                    for(var j = 0;j<_col;j++){
                        var _td = document.createElement("td");//創(chuàng)建列
                        _tr.appendChild(_td);
                    }
                    _table.appendChild(_tr);
                }
                $("#box").appendChild(_table);//添加表格



首先要獲取按鈕并給它綁定一個事件，在事件函數(shù)中，首先要獲取動態(tài)輸入的行和列，然后再創(chuàng)建一個新節(jié)點（table），在通過循環(huán)，先創(chuàng)建行，再在第一個循環(huán)里面再添加一個循環(huán)用來創(chuàng)建列。最后將創(chuàng)建好的table節(jié)點添加到存放table的div中就可以了。


歡迎關注微信公眾號:猴哥說前端