使用jquery生成10x10表

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做一个这样的表，我只是深入了解了为什么这段代码不能工作，所以请给我一个解决方案。

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);

小提琴

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>");
            }

        }       

小提琴