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

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

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


html結(jié)構(gòu)寫(xiě)好之后，我們就需要寫(xiě)js代碼，讓其動(dòng)態(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);//添加表格



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


歡迎關(guān)注微信公眾號(hào):猴哥說(shuō)前端