부트 스트랩이있는 동적 테이블

Question

부트 스트랩을 사용하여 동적 테이블을 만들려고하고 있는데 왜 작동하지 않는지 추론 할 수 없습니다.

<div class="container"> 
     <button onclick="CreateTable()">Extend</button>   
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Employee Id</th> 
        <th>Name</th> 
        <th>Country</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>John Doe</td> 
        <td>Country1</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Mary Moe</td> 
        <td>Country2</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>Jack Dooley</td> 
        <td>Country3</td> 
       </tr> 
       <p id="id_tabela"></p> 
      </tbody> 
     </table> 
    </div> 

및 자바 스크립트가있다 :하십시오 HTML 부분이있다

 function CreateTable() { 
      var employee = new Array(); 
      employee.push([4, "Billie Jean", "Country4"]); 
      employee.push([5, "Harish Kumar", "Country5"]); 
      employee.push([6, "Pankaj Mohan", "Country6"]); 
      employee.push([7, "Nitin Srivastav", "Country7"]); 
      employee.push([8, "Ramchandra Verma", "Country8"]); 

      var tablecontents = ""; 
      for (var i = 0; i < employee.length; i++) { 
       tablecontents += "<tr>"; 
       for (var j = 0; j < employee[i].length; j++) { 
        tablecontents += "<td>" + employee[i][j] + "</td>"; 
       } 
       tablecontents += "</tr>"; 
      } 
      document.getElementById("id_tabela").innerHTML = tablecontents; 
     } 

그래서 나는 테이블을 확장 할 그것이 작동하지 않는 이유를 알아낼 수 없습니다.

Answer 1

내부에 데이터를로드하고 있는데, 이는 원하지 않는 것입니다. 또한 단락이 없어야합니다. id을 tbody에 추가 한 다음 innerHTML처럼 확장하면 https://jsfiddle.net/14pt76wp/이됩니다.

왜 네이티브 함수를 사용하고 있습니까? 부트 스트랩에 jQuery가 포함되어 있습니다.

$('table tbody').append(tablecontents); 

또 다른 트릭 :

1. 배열 반복 처리 할
   employee[i] = '<td>' + employee[i].join('</td><td>') + '</td>';
2. tablecontents = '<tr>' + employee.join('</tr><tr>') + '</tr>';