JavaScript函數填充表不起作用

Question

我有一個html表，並且嘗試使用純JavaScript創建n行，並使用JSON數據填充該表（我在JavaScript代碼中使用JSON數據創建了一個變量）。 問題是，當我單擊按鈕時什么也沒有發生。 行不會被創建。 為了進行測試，我嘗試添加<p>元素和一些JavaScript來更改該元素，如下所示：

    document.getElementById("test").innerHTML="TEST";

這樣行得通，所以我知道插入行和數據的代碼有問題。

這是我的代碼：

 function populate() { var rows = [{ "ID": "John", "LastName": "Test", "DOB": "03-12-1959", "Gender": "M" }, { "ID": "John", "LastName": "Test", "DOB": "03-12-1959", "Gender": "M" } ]; var colNum = rows[0].length; var testtable = document.getElementsByClassName("test-table"); for (var i = 0; i <= rows.length; i++) { var testrow = testtable.insertRow(); for (var j = 0; j <= colNum; j++) { var testcells = testrow.insertCell(); testcells.innerHTML = rows[i][j]; } } } 

 <button onclick="populate()">Test</button> <table class="test-table"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>DOB</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td> <label for="row1"></label>123</td> <td>John</td> <td>Doe</td> <td>02-15-1982</td> <td>M</td> </tr> <tr> <td colspan="6"> <input id="row1" type="checkbox"> <table> <tr> <th>Phone Number</th> <td>555-3226</td> <th>City:</th> <td>New York</td> </tr> <tr> <th>Hire Date:</th> <td>8/13/12</td> <th>Salary:</th> <td>$48,000</td> </tr> </table> </td> </tr> </tbody> </table> 

當我在瀏覽器（firefox）中檢查元素時，它告訴我'insertRow'不是函數。

還有另一種方法嗎？ 我怎樣才能解決這個問題？ 任何幫助，將不勝感激。

Answer 1

這是解決方法的小提琴：

http://jsfiddle.net/7dfwrje7/4/

的HTML

     <button onclick="populate()">Test</button>
<table class="test-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>DOB</th>
      <th>Gender</th>
    </tr>
  </thead>

  <tbody id="data">
    <tr>
      <td><label for="row1"></label>123</td>
      <td>John</td>
      <td>Doe</td>
      <td>02-15-1982</td>
      <td>M</td>
    </tr>


    <tr>
      <td colspan="6">
        <input id="row1" type="checkbox">
        <table>
          <tr>
            <th>Phone Number</th>
            <td>555-3226</td>
            <th>City:</th>
            <td>New York</td>
          </tr>
          <tr>
            <th>Hire Date:</th>
            <td>8/13/12</td>
            <th>Salary:</th>
            <td>$48,000</td>
          </tr>
        </table>
      </td>
    </tr>
        </tbody>
      </table>

JS

function populate(){

    var data = [
 {
     "ID" : "2",
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    },

     {
     "ID" : "3",
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    }

];

  var tr, td;
  var tbody = document.getElementById("data");

    // loop through data source
    for (var i = 0; i < data.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = data[i].ID;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].FirstName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].LastName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].DOB;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].Gender;

    }

}

Answer 2

document.getElementsByClassName()返回一個集合，而不是單個元素。 如果類中有多個元素，則需要遍歷它們； 如果只有一個，則需要對其進行索引：

var testtable = document.getElementsByClassName("test-table")[0];

Answer 3

jfiddle似乎不喜歡HTML屬性上的onclick。 如果需要，您可以將其放在JS中：

document.getElementById('myButt').onclick = populate;

對於rows JSON對象，應將其視為地圖時將其視為數組。 您可以獲取對象的鍵，然后遍歷鍵：

 var colNum  = Object.keys(rows[0]).length;
 var testtable = document.getElementsByClassName("test-table")[0];

 for(var i=0; i <= rows.length; i++){
     var testrow = testtable.insertRow();

     Object.keys(rows[i]).forEach(function (key) {
         var testcells = testrow.insertCell();
         testcells.innerHTML = rows[i][key];
     });
 }
}

我還對調用getElementsByClassName()進行了與現有答案相同的更改。