Question

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

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

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

当我运行它时，它会在表格上方插入动态HTML 在桌子里面。
它不会对它应用任何样式（由类定义在我的CSS中）所以它只显示单元格的内容而不应用边框或列宽样式等。我必须以某种方式告诉它它还必须将CSS样式应用于此吗？
另外，我想知道在第一个变量I中是否存在某种方式不必单独列出所有数字，而只是写出系列的第一（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

Answer 2

第3个问题：

var cols = [1, 5];

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

现在你的for循环将为i。

运行值1,2,3,4和5

您可以进一步简化：

for（i = 1; i <= 5; i ++）{

但是这消除了传递开始和结束参数的可能性，因此在测试不同范围时不那么实用。

Answer 3

您必须将“bodyCal”id放在table body标签旁边，因为表格不能包含div，除非它包含在td标记中。试试这个：

$('#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>

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

3 个答案: