Блог

Главная - Вопросы по программированию - Как создать массив объекта из HTML-таблицы в javascript?

Как создать массив объекта из HTML-таблицы в javascript?

#javascript

#javascript

Вопрос:

Как я могу создать массив объектов из тела HTML-таблицы? Вот как выглядит мой HTML-код

 <tbody id="metadata">
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
</tbody>

вот что я попробовал в этом javascript, чтобы получить все значения из ячейки таблицы в массиве объектов. Я не понимаю, почему мой cMetadata всегда возвращает пустой массив

 let cMetadata;
if (document.querySelectorAll("metadata")) {
  let tableData = document.querySelectorAll("metadata");
  cMetadata = [...tableData].map((row) => {
    return {
      altions: row.cells[0].textContent,
      lexity: row.cells[1].textContent,
    };
  });
}

конечный массив объекта должен выглядеть следующим образом

 cMetadata = [{altions: 1 , lexity: 2},{altions: 2 , lexity: 2},{altions: 3 , lexity: 2}]

Комментарии:

1. Использование .querySelectorAll() для таких тривиальных запросов только снижает производительность вашего приложения document.getElementById() или document.getElementsByTagName() будет работать быстрее.

2. предполагая, что ваша tableData переменная должна хранить <tbody> -node, вы пропустили ‘#’ и должны использовать .querySelector() (не ‘all’). Т.е. .document.querySelector('#metadata')

3. После захвата <tbody> вам нужно выполнить дополнительные вложенные запросы для захвата <tr> <td> узлов (для детализации до значений вложенных <input> узлов)

4. @Evgengorbunkov — Что, в точном времени, представляет собой дефицит производительности? ИМО, ваш комментарий слишком педантичен и будет иметь почти нулевое влияние на производительность этого кода. (Скорее всего, в диапазоне до микросекунд даже на самом ограниченном процессоре.

5. я уже пробовал это .document.querySelector('#metadata') , но это не работает

Ответ №1:

Проверено, что у вас есть tbody узел внутри table узла. Вы можете получить предметы с помощью document.querySelectorAll("#metadata tr") :

 const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  const elements = document.querySelectorAll("#metadata tr");
  const result = Array.from(elements).map(tr => {
    const childs = tr.querySelectorAll("input");
    return {
      p1: childs[0].value,
      p2: childs[1].value
    };
  });

  console.log(result);
}); 
 <table>
  <tbody id="metadata">
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
  </tbody>
</table>
<button>Get Data</button>

Комментарии:

1. Хороший ответ, вероятно, не помешало бы какое-нибудь объяснение. Но я боролся с тем фактом, что OP не предоставил никаких элементов в строках с текстовым содержимым. Единственное, что есть элементы ввода. Однако код операционной системы предполагает обратное. ОП должен немного прояснить этот вопрос.

2. Это всегда дает мне неопределенное значение, когда у меня есть vale внутри поля ввода

3. Это связано с тем, что код вызывается только один раз в начале фрагмента, вы должны поместить его в функцию, которая запускается при нажатии кнопки или при изменении полей.

4. я ввел это в функцию только тогда, когда попробовал

5. Я бы вообще не советовал жестко кодировать DOM в вашем JS: если вы добавляете другие элементы в свой <td> , он внезапно перестает работать без красных флажков, которые вы не должны изменять структуру.