Javascript/jQuery:如何动态地向表体添加行(使用数组)

Question

我是Javascript的新手,希望有人可以帮助我.

我有一个带有表格的HTML页面,并希望使用JS动态地将具有特定内容的行添加到表格的主体中.

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

1. 当我运行它时,它会在表格上方而不是在表格的正文中插入动态HTML.
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

允许的内容:零个或多个<tr>元素.

相关的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