使用 jquery 生成 10x10 表答案

【问题标题】：Generate 10x10 table using jquery使用 jquery 生成 10x10 表
【发布时间】：2013-10-07 03:36:27
【问题描述】：

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

【问题讨论】：

你还没有提到你看到什么样的错误？
没有错误我想得到 10 和 10 ，现在我得到 10 THAN 100

标签： jquery append html-table

【解决方案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

【讨论】：

很高兴看到有人使用片段而不是直接在 DOM 上工作

【解决方案2】：

你可以的

        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

【讨论】：

【解决方案3】：

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

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> 内。

【讨论】：

是的，这很好，但是浪费内存，反正我以后应该能够添加和删除单元格/行，所以我想知道为什么这不起作用
试试我的方法。您将在<tr> 中获得您的<td>。

【解决方案4】：

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

【讨论】：