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>

- keewee279

---

请将目标对象定位在<tbody>元素上。 - roullie

Answer 1

你应该将ID分配给tbody，因为它是目标。还要注意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

- Satpal

---

非常感谢 - 这解决了我问题中的1）和2），完美运行！您能帮我解决第三个问题吗？这些将始终是一系列数字，从1开始，以用户输入的变量数字结束。 - keewee279

@keewee279，请查看更新的答案，将 for (var i = 1; i <= 5; i++) 中的 1 和 5 替换为所需数字。 - Satpal

这里将2设置为常数。如何向动态创建的表添加动态数据？ - Coding world

Answer 2

对于你的第三个问题：

var cols = [1, 5];

for (i = cols[0]; i <= cols[1]; i++) {

现在你的for循环将以1、2、3、4和5作为i的值运行。

你可以进一步简化它:

for (i = 1; i <= 5; i++) {

但这会删除传递起始和结束参数的可能性，因此在测试不同范围时不太实用。

- Ward D.S.

---

谢谢你同样的帮助！ - keewee279

Answer 3

您必须将"id为bodyCal"的元素放置在表格的tbody标签旁边，因为表格不能包含除非它被包裹在td标签中的div元素。请尝试以下代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="bodyCal">
    </tbody>
</table>

<button id="btnStart">Start</button>

- omikes

---

谢谢你也！ - keewee279