Question

问题1 - 所以我试图通过我的json数组做一个简单的循环，并为数组中的每个对象创建一个新行。出于某种原因，我无法弄清楚，它只是将数组的最后一个对象打印到DOM。所以我知道我的一切都是正确的，我只是不知道为什么只有一个对象出现。

我知道在互联网上还有其他类似的帖子，我只是在弄清楚我的确切问题。

问题2 - 我收到错误

＆＃34;无法读取属性insertRow of undefined＆＃34;

如果我尝试将初始var row = table.insertRow(-1);置于我的函数中，则在控制台中

，但如果我的函数不在函数中，我就不会收到错误。我想如果它在GenerateTable（）中，那么我的函数仍然可以访问它吗？

＆＃13;

var table_data = [{
    first_name: 'Zoe',
    last_name: 'Heriot',
    home: 'Space Station W3'
}, {
    first_name: 'Jo',
    last_name: 'Grant',
    home: 'Earth'
}, {
    first_name: 'Clara',
    last_name: 'Oswald',
    home: 'Earth'
}, {
    first_name: 'Adric',
    last_name: null,
    home: 'Alzarius'
}, {
    first_name: 'Susan',
    last_name: 'Foreman',
    home: 'Gallifrey'
}];


var row = table.insertRow(-1);

function GenerateTable() {

    var table = document.getElementById('table')[1];
    for (var i = 0; i <= table_data.length; i++) {

        var firstName = table_data[i].first_name;
        var lastName = table_data[i].last_name;
        var home = table_data[i].home;

        row.innerHTML = `
  <td>${firstName}</td>
  <td>${lastName}</td>
  <td>${home}</td>
`;
    };
};

if (document.attachEvent ? document.readyState === "complete" :
    document.readyState !== "loading") {
    GenerateTable();
} else {
    document.addEventListener('DOMContentLoaded', GenerateTable);
}

＆＃13;

<table id="table">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Home</th>
    </tr>
</table>

＆＃13;

Answer 1

问题1：

row.innerHTML = `
  <td>${firstName}</td>
  <td>${lastName}</td>
  <td>${home}</td>
`;

说＆＃34;删除row.innerHTML中的所有内容并替换为<td>$...。由于row值永远不会改变，因此您始终会写入同一行。

问题2：

您是否尝试在table.insertRow() var定义之后添加table并删除[1]？像：

  var table = document.getElementById('table');
  var row = table.insertRow(-1);

您可以详细了解insertRow以及如何在Mozilla Developer pages使用它。

Answer 2

一些事情：

在定义变量之前，无法访问变量。您的脚本的第一行执行此操作，这就是您收到错误的原因：

var row = table.insertRow(-1);

直到函数内部才定义

table，所以在你告诉javascript它是什么之前你不能使用它。另外，您希望通过循环为每个行程添加一行，因此您需要将insertRow()调用放在循环中，每次都会添加一行。

另外，我想在i < table_data.length不<=时停止循环，否则会在最后一次旅行中抛出错误。

这是一个工作片段：

var table_data =[{ first_name : 'Zoe',
                 last_name : 'Heriot',
                 home : 'Space Station W3'},
                 { first_name : 'Jo',
                 last_name : 'Grant',
                 home : 'Earth'},
               { first_name : 'Clara',
                 last_name : 'Oswald',
                 home : 'Earth'},
               { first_name : 'Adric',
                 last_name : null,
                 home : 'Alzarius'},
               { first_name : 'Susan',
                 last_name : 'Foreman',
                 home : 'Gallifrey'} ];

function GenerateTable(){
    var table = document.getElementById('table');
    for (var i=0; i < table_data.length; i++) {
        var row = table.insertRow(-1);

        var firstName = table_data[i].first_name;
        var lastName = table_data[i].last_name;
        var home = table_data[i].home;

        row.innerHTML = `
        <td>${firstName}</td>
        <td>${lastName}</td>
        <td>${home}</td>
        `;
    };
};
GenerateTable()

tr:nth-child(even) {
        background: #ccdced;
    }
 td, th {
  padding:.5em
  }

<table id="table">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Home</th>
    </tr>
</table>

我试图循环一个对象数组并将它们填充到表中

2 个答案: