Question

我做了一些搜索，并将我的猫用作橡皮鸭，但我真的很难创建一个函数，它将一个对象和一个表id作为参数来吐出一个简单的表。

我正在使用基本的javascript，因为我正在通过潜水教自己。你可以在http://oxygen.meddleso.me/查看整个代码，但我会发布我认为最相关的代码：

// HTML

<div id="inventoryTableDiv">
    <table>
      <tbody id='invtbody'></tbody>
    </table>
</div>

// main.js

var inventory = [{ice: 10}, {metal: 10}];

function refreshValues() {
  /* lots of other lines snipped */
  generateTable(inventory, invtbody);
}

function generateTable(array, tablebodyid) {
  var tablebody = document.getElementById(tablebodyid);
  var tr = "<tr>";
  for (var i = 0; i < array.length; i++) {
    obj = array[i]
    for (var x in obj) {
      console.log(x + " : " + obj[x]);
      tr += "<td>" + x + "</td>" + "<td>" + obj[x] + "</td>" + "</tr>";
      console.log(tr);
      tablebody.innerHTML = tr;
    }
  }
}

generateTable基于这个答案：Create HTML table from JavaScript object

它吐出第一个日志，＆＃34;冰：10＆＃34;和第一组tr：

"<tr><td>ice</td><td>10</td></tr>"

但是我收到了错误：

Cannot set property 'innerHTML' of null

如果我只是console.log＆＃39; d＆＃34; tr＆＃34;它怎么可能是空的？任何帮助将不胜感激，我希望这不是一个可怕的SO问题。

Answer 1

generateTable(inventory, invtbody);

在上面一行中，invtbody未初始化。您需要改为使用"invtbody"。

您应该将该行更改为：

generateTable(inventory, "invtbody");

检查完整的示例：

var inventory = [{ice: 10}, {metal: 10}];

function refreshValues() {
  /* lots of other lines snipped */
  generateTable(inventory, 'invtbody');
}

function generateTable(array, tablebodyid) {
  var tablebody = document.getElementById(tablebodyid);
  var tr = "<tr>";
  for (var i = 0; i < array.length; i++) {
    obj = array[i]
    for (var x in obj) {
      console.log(x + " : " + obj[x]);
      tr += "<td>" + x + "</td>" + "<td>" + obj[x] + "</td>" + "</tr>";
      console.log(tr);
      tablebody.innerHTML = tr;
    }
  }
}

refreshValues();

<div id="inventoryTableDiv">
    <table>
      <tbody id='invtbody'></tbody>
    </table>
</div>

Answer 2

您使用invtbody作为变量，但它应该是一个字符串。所以，只需将其括在引号中即可。

generateTable(inventory, 'invtbody');

从javascript对象错误

2 个答案: