ブートストラップ付きのダイナミックテーブル

Question

私はブートストラップでダイナミックテーブルを作成しようとしていますが、なぜ動作していないのか推測できません。 HTML部分があります：

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

とJavaScriptがあります：

 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>';