Question

我想用jquery创建一个简单的10x10表，这段代码有什么问题？它创造了这个（我没有添加tbody，我不知道为什么它在那里）

<table id="game_table" border="1">
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<td>alma</td>
...
<td>alma</td>
</table>

下面是代码：

        var $game_table = $("#game_table"),
        init = function(){
            for(var i = 0; i < 10; ++i){
                $game_table.append("<tr>");
                for(var j = 0; j < 10; ++j){
                    $game_table.append("<td>alma</td>");
                }
                $game_table.append("</tr>");
            }
        };

编辑：感谢答案人员，但是我可以使用javascript创建这样的表格，我真的很有兴趣为什么这段代码不起作用，所以请给我一个解决方案。< / p>

Answer 1

最有效的方法是使用普通的JS，并不是那么难：

var gt   = document.getElementById('game_table'),
    i    = 0, 
    frag = document.createDocumentFragment(),
    tr   = document.createElement('tr'),
    td   = document.createElement('td');

while (i<10) {
    var _tr = tr.cloneNode(),
        j = 0;
    while (j<10) {
        _tr.appendChild(td.cloneNode());
        j++;
    }
    frag.appendChild(_tr);
    i++;
}

gt.appendChild(frag);

FIDDLE

Answer 2

我更喜欢这样做。我认为它会解决你的问题。

for(var i = 0; i < 10; ++i){
    var tr = "<tr>";
    for(var j = 0; j < 10; ++j){
        tr += "<td>alma</td>";
    }
    tr += "</tr>";
    $game_table.append(tr);
}

但是您也会在<tbody>之后追加，并且可能应该将其放在<tr>内。

Answer 3

你可以做到

        var $game_table = $("#game_table");
        for(var i = 0; i < 10; ++i){
            var tr=$("<tr></tr>");
            $game_table.append(tr);
            for(var j = 0; j < 10; ++j){
                tr.append("<td>alma</td>");
            }

        }

jsfiddle

Answer 4

好的解决方案非常简单，我将TD-s附加到表中而不是TR-s

使用jquery生成10x10表

4 个答案: