Javascript / jQuery：如何动态添加行到表体（使用数组）

我是 Javascript 新手，希望有人能帮助我解决这个问题。

我有一个 HTML 页面，上面有一个表格，我想使用JS动态添加特定内容的行到表体.

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

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

有人可以告诉我我在这里做错了什么吗？

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

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

你应该瞄准tbody所以给它分配ID。另请注意div不能是以下的孩子tbody https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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 http://jsfiddle.net/we0dttbh/1/