0

我想用 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制作一张这样的表格，我真的很感兴趣为什么这段代码不起作用，所以请给我一个解决方案。

4

4 回答 4

2

最有效的方法是使用纯 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);

小提琴

于 2013-05-15T23:17:59.157 回答
1

你可以做 

        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

于 2013-05-15T23:15:06.583 回答
1

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

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>.

于 2013-05-15T23:02:16.040 回答
-1

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

于 2013-05-16T08:54:17.240 回答