Javascript - 在html表中添加多个行

Question

此问题可以重复。

我需要添加24行的HTML表中有8列点击按钮。我寻找一些例子，我尝试了这个（下面的代码），但只有行是添加。有人可以帮忙吗？感谢您的关注。

function addRow(tableID) { 

     var table = document.getElementById(tableID); 


     var rowCount = 3; 


     for (var i = 0; i < 24; i++) { 
      var row = table.insertRow(rowCount);  

      var cell1 = row.insertCell(i); 
      var element1 = document.createElement("input"); 
      element1.type = "checkbox"; 
      element1.name="chbx"; 


      var element2 = document.createElement("label"); 

      if (i < 9) { 
       element2.innerHTML = "0" + i ; 
      } 
      else { 
       element2.innerHTML = i; 
      } 

      element2.name="lbl"; 

      cell1.appendChild(element1); 
      cell1.appendChild(element2); 


      var cell2 = row.insertCell(i + 1); 
      cell2.innerHTML = "2"; 

      var cell3 = row.insertCell(i + 2); 
      cell3.innerHTML = "3"; 

      var cell4 = row.insertCell(i + 3); 
      cell4.innerHTML = "4"; 

      var cell5 = row.insertCell(i + 4); 
      cell5.innerHTML = "5"; 

      var cell6 = row.insertCell(i + 5); 
      cell6.innerHTML = "6"; 

      var cell7 = row.insertCell(i + 6); 
      cell7.innerHTML = "7"; 

      var cell8 = row.insertCell(i + 7); 
      cell8.innerHTML = "8"; 

      rowCount++; 
     } 
    } 

Answer 1

退房这种做法：

JS

var table = document.getElementById('table'); 

function addRows(table, rows, columns){ 
    var row = ''; 

    for (var i = 0; i < rows; i++){ 
    row = '<tr>'; 
    for(var j = 0; j < columns; j++){ 
    row += '<td>' + j +'</td>' 
    } 
    row += '</tr>'; 
    table.innerHTML += row 
    } 
} 

addRows(table, 24, 8); 

HTML

<table id="table"> 
</table> 

看看这个codepen。