如何制定我的for循環代碼以在特定的html表單元格中插入值？

Question

我在將對象的值插入動態生成的HTML表中時遇到問題。

在下面找到我的簡單HTML代碼：

<table id="table" border="1">
    <tr>
        <th>Number</th>
        <th>Amount</th>
        <th>Status</th>
    </tr>
</table>  

我使用對象的值動態填充上面的表。 該對象是根據localStorage保存的值生成的。

查找內聯我的JavaScript代碼以及我的評論和說明：

var array = JSON.parse(localStorage.getItem('transactionData'));
console.log(array);

如上所示， console.log(array)正確產生：

table = document.getElementById("table");

for(var i = 0; i < array.length; i++)
{
  console.log("Number of transactions: " +array.length);
  var newRow = table.insertRow(table.length);

  var x;
    for (x in array) 
    {
      var cell = newRow.insertCell(x);
      cell.innerHTML += array[x].payersNumber;

   }
}

我的主要問題似乎在第二個 for循環的范圍內。 我想要這里的代碼來填充表中的每一行（按此順序）： 數字，金額，最后是狀態 。

上面第二個for循環中的代碼錯誤地用電話號碼填充了表格中的每個單元格，並且還添加了其他列，如下圖所示

請幫助我理解如何正確地編寫代碼，以用對象的數字，金額和狀態值填充每一行。

期待您的幫助。

Answer 1

您懷疑問題出在這里：

    for (x in array) 
    {
      var cell = newRow.insertCell(x);
      cell.innerHTML += array[x].payersNumber;

   }

根據數組的結構，每個元素都是一個具有六個鍵的對象-盡管表只有三行-因此它添加了兩個額外的單元格，這些單元格是從對象中不存在的條目填充的，從而使其未定義 。

我建議您將要顯示在表中的鍵添加為一個數組（反映表的順序）：

var keys=["payersNumber","amount","paymentStatus"];

這樣，您可以遍歷for循環內的鍵並填充正確的單元格。

這是一個例子：

 var array = [{ amount: 12, payersNumber: 1245, paymentStatus: "okay" }, { amount: 24, payersNumber: 3345, paymentStatus: "okay" }, { amount: 45, payersNumber: 4534, paymentStatus: "not okay" }]; table = document.getElementById("table"); var currentTransaction; var keys = ["payersNumber", "amount", "paymentStatus"]; for (var i = 0; i < array.length; i++) { console.log("Number of transactions: " + array.length); var newRow = table.insertRow(table.length); currentTransaction = array[i]; for (var b = 0; b < keys.length; b++) { var cell = newRow.insertCell(b); cell.innerText = currentTransaction[keys[b]]; } } 

 <table id="table" border="1"> <tr> <th>Number</th> <th>Amount</th> <th>Status</th> </tr> </table> 

Answer 2

for（x in array），您正在訪問數組，而不是數組內部的對象。

嘗試類似的方法：

  var table = document.getElementById("table");

  console.log("Number of transactions: " + array.length);

  for (var i = 0; i < array.length; i++) {
    var newRow = table.insertRow(table.length);
    var currentTransactionLength = Object.keys(array[i]).length;
    var currentTransactionObject = array[i];

    for (var x = 0; x < currentTransactionLength; x++) {
      var cell = newRow.insertCell(x);
      cellContents = currentTransactionObject[Object.keys(currentTransactionObject)[x]];
      cell.innerHTML += cellContents;
    }
  }

這樣，您將在第一個循環上訪問該數組，然后在第二個循環上訪問該數組的每個對象。