用于填充表的JavaScript函数不起作用

JavaScript function to populate table not working

本文关键字：函数 不起作用 JavaScript 填充 用于      更新时间：2023-09-26

我有一个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'不是一个函数。

还有别的方法吗?我该如何解决这个问题?

解决方案如下:

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

document.getElementsByClassName()返回一个集合，而不是单个元素。如果类中有多个元素，则需要循环遍历它们;如果只有一个，则需要索引它:

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

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()，我也做了与先前存在的答案相同的更改。

相关文章：