Javascript - 在 html 表格中添加多行

Question

这个问题可能是重复的。

我需要在单击按钮时在 html 表格中添加 24 行、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 .