Как добавить данные строки таблицы в массив

VonnScript

1 июля 2021 в 21:21

421

Цель: получить все данные строки (ячейки) таблицы и добавить их в массив

Проблема: если имеется более 1 строки, она перезаписывает ранее добавленные элементы массива, а не добавляет их в конец массива. Это приводит к тому, что в массиве последний набор данных строки таблицы дублируется/утроивается/и т. д. (столько строк, сколько существует в таблице)

Настройка: У меня есть динамическая таблица html, в которую пользователь может добавлять строки, вводя имя пользователя и возраст и нажимая кнопку «Добавить». Кнопка «Загрузить» должна получить элементы тела таблицы и заполнить объект, где после цикла for должен получить внутренний текст, обновить объект и нажать () объект в массив. Но вот результат: Снимок экрана 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);
  }
}

Источник

Поделиться Скопировать ссылку Скопировано

Chris

1 июля 2021 в 21:49

Почему бы не реорганизовать код так, чтобы вы сначала добавляли имя и возраст как объект в массив, а затем использовали массив для создания таблицы? Затем вместо управления html вы управляете только данными, позволяя шаблону создавать новую строку каждый раз, когда создается объект.

VonnScript

3 июля 2021 в 18:11

Спасибо за совет @Chris. Я сейчас изучаю этот вариант. Гораздо разумнее сделать так, как вы предложили.

Ответы (1)

H K

1 июля 2021 в 21:42

Поскольку вы используете один и тот же объект collectRoles для каждого изображения, вы переопределяете все объекты, поскольку они являются ссылками на один и тот же объект.

Вы можете исследовать "ссылка и значение в JavaScript", чтобы лучше понять, почему это так.

Вот как я бы написал вашу функцию roleTableData:

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

Поделиться Скопировать ссылку Скопировано

VonnScript

3 июля 2021 в 18:12

Спасибо за ответ. Сейчас я изучаю оператора распространения, чтобы понять, что именно делает предложенный вами код. Раз понял, отвечу еще раз

H K

6 июля 2021 в 11:39

В этом случае оператор расширения используется для преобразования nodeList (который похож на массив, но не может быть повторен методом массива map) в фактический массив. См. этот вопрос SO: coderhelper.com/questions/7459704/…