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

我是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] + " \ 1 \ 2 \ 
 \ "; } $('#bodyCal').html(tbody); }); 

我的HTML：

 
      
 
 
Col 1
 
 
 
  
  

Answer 1

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

允许的内容：零个或多个

元素。

相关的HTML更改：

对于第三个问题：

 var tbody = ''; for (var i = 1; i <= 5; i++) { tbody += " " + i +"  \ 2 \ 
 \ "; } $('#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 += "\ "; for (i = 0; i < cols.length; i++) { tbody += "" + cols[i] + " \ "; } tbody += "<\tr>\ "; } $('#bodyCal').html(tbody); }); 

  
      
 
 
Col 1
 
 
 
 
 
 Start