我試圖遍歷對象數組並將其填充到表中

Question

問題1-所以我試圖通過json數組做一個簡單的循環，並為數組中的每個對象創建一個新行。 由於某種原因，我不知道，它只是將數組的最后一個對象打印到DOM。 所以我知道我已正確連接了所有東西，但我只是不知道為什么只顯示一個對象。

我知道在互聯網上還有其他與此類似的帖子，我只是很難弄清楚我的確切問題。

問題2-我收到錯誤

“無法讀取未定義的屬性insertRow”

在控制台中，如果我嘗試將初始var row = table.insertRow(-1); 在函數內部，但如果在函數外部，則不會收到錯誤。 我以為如果在GenerateTable（）內部，那么我的函數仍然可以訪問它？

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

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

Answer 1

問題1：

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

就是說“刪除row.innerHTML中的所有row.innerHTML並替換為<td>$...並且由於row值永不改變，因此您將始終寫入同一行。

問題2：

您是否嘗試過將table.insertRow()放在table var定義之后並刪除[1] ？ 喜歡：

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

您可以在Mozilla開發人員頁面上閱讀有關insertRow以及如何使用它的更多信息。

Answer 2

一些東西：

在定義變量之前，您無法訪問它。 腳本的第一行執行此操作，這就是為什么出現錯誤的原因：

var row = table.insertRow(-1);

直到在函數內部才定義table ，所以直到告訴javascript它是什么之前您不能使用它。 此外，您還希望為循環中的每次行程添加一行，因此您需要將insertRow()調用放入循環中，該循環將在每次添加一行。

另外，當i < table_data.length not <=時， 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>