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

我是Javascript新手，希望有人能帮助我。Javascript/jQuery：如何动态添加行到表体（使用数组）

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

到目前为止，我有下面的代码在这里缩短（现实中有更多的行和列等），这是造成我的以下问题：

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

来源

2015-06-02 keewee279

目标''代替 – roullie

您应该尽量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

来源

2015-06-02 06:25:22 Satpal

非常感谢 - 这能解决1）和2）我的问题，完美的作品！你能帮我解答问题3吗？这些将始终是从1开始并以由用户输入的可变数字结束的一系列数字。 – keewee279

@ keewee279，查看更新的答案，更改'for（var i = 1; i <= 5; i ++）'用所需数字替换'1'和'5' – Satpal

这很完美 - 非常感谢您的快速帮助！ :) – keewee279

对于您的第三个问题：

var cols = [1, 5]; 

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

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

你可以进一步简化它：

为（I = 1;我< = 5;我++）{

但是这消除传递的开始和结束参数的可能性，所以不实用时测试不同的范围。

来源

2015-06-02 06:34:34

感谢您的支持！ – keewee279

您必须将“bodyCal”id放在表格主体标记的旁边，因为表格不能包含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>

来源

2015-06-02 06:36:57 oMiKeY

感谢您的支持！ – keewee279

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

回答

相关问题