Javascript 如何制定for循环代码以在特定html表格单元格中插入值？

我在将对象中的值插入动态生成的HTML表时遇到问题

下面是我的简单HTML代码：

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

如上所示的

console.log（array）

正确地生成：

table=document.getElementById（“table”）；
对于（var i=0；i

我的主要问题似乎在第二个for循环的范围内。 我想让这里的代码用数字、金额（按此顺序）填充表中的每一行，最后是状态（按此顺序）

上面第二个for循环中的代码错误地用电话号码填充了表中的每个单元格，并且还添加了其他列，如下图所示

请帮助我理解如何正确地制定代码，用对象中的数字、金额和状态值填充每一行

---

期待您的帮助。

正如您所怀疑的，问题在于：

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

   }

根据数组的结构，每个元素都是一个具有六个键的对象-您的表只有三行-因此它添加了两个额外的单元格，这些单元格是从对象中不存在的条目填充的，这使得它未定义

我建议将要显示在表中的键添加到数组中，如（反映表的顺序）：

通过这种方式，您可以在for循环中迭代键并填充正确的单元格

下面是一个例子：

var数组=[{
金额：12，
付款人编号：1245，
paymentStatus：“好的”
}, {
金额：24，
付款人编号：3345，
paymentStatus：“好的”
}, {
金额：45，
付款人编号：4534，
paymentStatus：“不正常”
}];
table=document.getElementById（“table”）；
var交易；
变量键=[“付款人编号”、“金额”、“付款状态”]；
对于（var i=0；i

数
数量
地位

正如您所怀疑的，问题在于：

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

   }

根据数组的结构，每个元素都是一个具有六个键的对象-您的表只有三行-因此它添加了两个额外的单元格，这些单元格是从对象中不存在的条目填充的，这使得它未定义

我建议将要显示在表中的键添加到数组中，如（反映表的顺序）：

通过这种方式，您可以在for循环中迭代键并填充正确的单元格

下面是一个例子：

var数组=[{
金额：12，
付款人编号：1245，
paymentStatus：“好的”
}, {
金额：24，
付款人编号：3345，
paymentStatus：“好的”
}, {
金额：45，
付款人编号：4534，
paymentStatus：“不正常”
}];
table=document.getElementById（“table”）；
var交易；
变量键=[“付款人编号”、“金额”、“付款状态”]；
对于（var i=0；i

数
数量
地位

对于（数组中的x），您正在访问数组，而不是数组中的对象

尝试以下方法：

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

var table=document.getElementById（“表”）；
log（“事务数：+array.length”）；
对于（var i=0；i

通过这种方式，您将访问第一个循环中的数组，然后访问第二个循环中该数组的每个对象。

对于（数组中的x），您将访问数组，而不是数组中的对象

尝试以下方法：

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

var table=document.getElementById（“表”）；
log（“事务数：+array.length”）；
对于（var i=0；i

---

通过这种方式，您可以在第一个循环中访问数组，然后在第二个循环中访问该数组的每个对象。

谢谢！您的解决方案可以工作，但不会根据标题进行排序：编号、金额和状态。有没有办法对第二个循环中的对象进行排序和过滤？对不起，伙计。这是一个全新的问题！如果我帮你解决了这个问题，那就继续做吧，记下我的答案，这样我就能得到分数了。我在存钱，谢谢！您的解决方案可以工作，但不会根据标题进行排序：编号、金额和状态。有没有办法对第二个循环中的对象进行排序和过滤？对不起，伙计。这是一个全新的问题！如果我帮你解决了这个问题，那就把我的答案记下来

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