자바 스크립트 - html 테이블에 배수 행 추가

Question

이 질문은 중복 될 수 있습니다.

단추를 클릭 할 때 8 개의 열이있는 html 테이블에 24 개의 행을 추가해야합니다. 몇 가지 예를 살펴 보았습니다. 아래에서이 코드를 시도했지만 행만 추가되었습니다. 누군가 도울 수 있니? 관심을 가져 주셔서 감사합니다.

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을.