如何将表格行数据添加到数组

Question

目标：获取所有表格行（单元格）数据并添加到数组中

问题：如果多于 1 行，它会覆盖先前添加的数组条目，而不是将其添加到数组的末尾。这会导致数组的最后一个表行数据集重复/三次/等（与表中存在的行一样多）

设置： 我有一个动态 html 表，用户可以通过输入用户名和年龄来添加行，然后单击“添加”按钮。 Load 按钮必须获取表体元素并填充一个对象，在 for 循环之后必须获取 innerText，更新对象并将对象 push() 到数组中。但这是结果： Screenshot of console.log of array

let roleArr = [];
loadBtn.addEventListener("click", () => {
  roleTableData();
});

function roleTableData() {
  let test = tblRows.children;
  const collectRoles = {
    uName: "",
    uAge: "",
  };

  for (let i = 0; i < test.length; i++) {
    collectRoles.uName= test[i].children[0].innerText;
    collectRoles.uAge= test[i].children[1].innerText;
    roleArr.push(collectRoles);
  }
}

Answer 1

由于您对每个错误使用相同的 collectRoles 对象，因此您正在重新定义所有对象，因为它们是同一对象的引用。

您可以研究“JavaScript 中的引用与价值”以更好地理解为什么会这样。

我会这样写你的 roleTableData 函数：

function roleTableData() {
  roleArr = [...tblRows.children].map(tr => {
    return {
      uName: tr.children[0].innerText,
      uAge: tr.children[1].innerText
    };
  });
}