Javascript/jQuery : How to dynamically add rows to table body (using arrays)

Question

我是 Javascript 的新手，希望这里有人可以帮助我。

我有一个带有表格的 HTML 页面，我想使用 JS 将具有特定内容的行动态添加到表格的主体。

到目前为止，我有下面的代码，在这里被缩短了(实际上有更多的行和列等)这导致了以下问题:

1. 当我运行它时，它会在表格上方插入动态 HTML 在 table 的 body 里面。
2. 它不应用任何样式(由类定义 在我的 CSS 中)所以它只显示单元格的内容而不应用 边框或列宽样式等。我是否必须以某种方式告诉它 它也必须对此应用 CSS 样式吗？
3. 此外，我想知道是否有一种方法可以在第一个变量中 不必单独列出所有数字，而只需写下 系列的第一个 (1) 和最后一个 (5) 编号，因为它们很简单 序列如 1、2、3、4、5。

有人能告诉我我做错了什么吗？

我的 JS:

$('#btnStart').on('click', function(){
    var cols = [1, 2, 3, 4, 5];
    var tbody = '';
    var i;
    for (i = 0; i < cols.length; i++) {
        tbody += cols[i] + "<tr> \
                <td class='td col1'>1</td> \
                <td class='td col2'>2</td> \
                <td class='td col3'><div contenteditable='true' class='editable'></div></td> \
            </tr>";
    }
    $('#bodyCal').html(tbody);
});

我的 HTML:

<table class="tblCal">
    <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
    </colgroup>
    <thead>
        <tr>
            <th colspan="3" class="th th2">Col 1</th>
        </tr>
    </thead>
    <tbody>
        <div id="bodyCal"></div>
    </tbody>
</table>

Answer 1

你应该定位 tbody所以给它分配ID。另请注意 div不能是 tbody 的 child

Permitted content: Zero or more <tr> elements.

相关的 HTML 更改:

<tbody id="bodyCal">
</tbody>

第三个问题:

var tbody = '';
for (var i = 1; i <= 5; i++) {
    tbody +=  "<tr> <td class='td col1'>" + i +" </td> \
                <td class='td col2'>2</td> \
                <td class='td col3'><div contenteditable='true' class='editable'></div></td> \
            </tr>";
}
$('#bodyCal').html(tbody);

DEMO