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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我有一个带有表格的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] + "<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>

回答：

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

回答：

对于您的第三个问题：

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

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

你可以进一步简化它：

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

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

回答：

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

以上是 Javascript/jQuery：如何动态添加行到表体（使用数组） 的全部内容， 来源链接： utcz.com/qa/264821.html

回到顶部