如何制定我的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;
    }
  }

这样，您将在第一个循环上访问该数组，然后在第二个循环上访问该数组的每个对象。