时间戳

首页 > 解决方案 > 如何将表格行数据添加到数组

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

问题描述

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

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

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

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

标签： javascriptarraysobjectdynamicpush

解决方案

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

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

以下是我将如何编写您的 roleTableData 函数：

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

推荐阅读