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

I am new to Javascript and hope someone here can help me with this.

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

I have an HTML page with a table on it and would like to use JS to dynamically add rows with certain content to the table's body.

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

So far I have the below code which is shortened here (in reality there are more rows and columns etc.) which is causing me the following issues:

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

When I run this it inserts the dynamic HTML above the table instead of inside the table's body.

当我运行它时,它会在表格上方而不是在表格的主体内部插入动态HTML。

It does not apply any styles to it (which are defined by the classes in my CSS) so it just shows the cells' content without applying border or column width styles etc. Do I have to tell it somehow that it has to apply the CSS styles to this as well ?

它不应用任何样式(由我的CSS中的类定义),因此它只显示单元格的内容而不应用边框或列宽样式等。我必须告诉它它必须应用CSS这样的风格?

Also, I was wondering if there is a way that in the first variable I don't have to list all numbers separately but instead just write the first (1) and last (5) number of a series as they are just simple sequences like 1, 2, 3, 4, 5.

另外,我想知道是否有一种方法,在第一个变量中我不必单独列出所有数字,而只是写一个系列的第一个(1)和最后一个(5),因为它们只是简单的序列1,2,3,4,5。

Can someone tell me what I am doing wrong here ?

谁能告诉我这里我做错了什么?

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>

3 个解决方案

#1

You should target tbody so assign the ID to it. Also note div can't be the child of tbody

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

Permitted content: Zero or more <tr> elements.

允许的内容:零个或多个元素。

Relevant HTML changes:

#2

For your 3rd question:

对于你的第3个问题:

var cols = [1, 5];

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

now your for loop will run with values 1, 2, 3, 4 and 5 for i.

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

You could simplify it further:

你可以进一步简化它:

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

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

But this removes the possibility of passing a start and end parameter, so not as practical when testing different ranges.

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

#3

You must place the "bodyCal" id next to the table body tag, as a table cannot contain a div unless it is wrapped in a td tag. Try this:

您必须将“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>

#1