Javascript / jQuery：如何动态添加行到表体（使用数组） [英] Javascript / jQuery: How to dynamically add rows to table body (using arrays)

问题描述

我是Javascript新手，希望有人能帮助我。

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

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

1. 当我运行它时，会在表格上方插入动态HTML，而不是
   。


2. 它不会应用任何样式（它是由我的CSS中的类
   定义的），所以它只显示单元格的内容，而不应用
   边框或列宽样式等。告诉它不知何故
   它必须将CSS样式应用于此？


3. 另外，我想知道是否有方法在第一个变量I
   不必单独列出所有的数字，而只是写出一系列的
   第一个（1）和最后一个（5）数字，因为它们仅仅是简单的
   序列，如1，2，3，4 ，5。

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

我的JS：

  $（'＃b （'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 =3class =th th2> Col 1< / th> 
< / tr> 
< / thead> 
< tbody> 
< div id =bodyCal>< / div> 
< / tbody> 
< / table> 
  

解决方案

您应该定位 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

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

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.

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:

1. When I run this it inserts the dynamic HTML above the table instead of inside the table's body.
2. 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 ?
3. 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.

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>

解决方案

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

Permitted content: Zero or more <tr> elements.

Relevant HTML changes:

<tbody id="bodyCal">
</tbody>

For 3rd Question:

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

这篇关于Javascript / jQuery：如何动态添加行到表体（使用数组）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！