Как получить все значения из таблиц?

Question

[maks78945]

Добрый день! Подскажите как мне получить 2 json строки, со всеми значения из каждой таблицы в формате "название поля": "значение", но при том что количество строк в каждой таблице может быть не ограничено.

Вот пример таблиц

<table id='table1'>
  <thead>
    <tr>
      <td>ФИО</td>
      <td>Телефон</td>
      <td>Должность</td>
    </tr>
  </thead>
  <tr>
    <td data-name="fio"><input type="text" size="10" ></td>
    <td data-name="phone"><input type="text" size="10"></td>
    <td data-name="position"><input type="text" size="10"></td>
  </tr>
</table>

<table id='table2'>
  <thead>
    <tr>
      <td>Город</td>
      <td>Улица</td>
      <td>Номер дома</td>
    </tr>
  </thead>
  <tr>
    <td data-name="city"><input type="text" size="10" ></td>
    <td data-name="street"><input type="text" size="10"></td>
    <td data-name="house"><input type="text" size="10"></td>
  </tr>
</table>

Answer 1

[0xD34F]

function getTableData(table) {
  if (typeof table === 'string') {
    table = document.querySelector(table);
  }

  return Array.from(table.querySelectorAll('tbody tr'), tr => {
    return Object.fromEntries(Array.from(tr.cells, td => [
      td.dataset.name,
      td.querySelector('input').value,
    ]));
  });
}


const data1 = getTableData('#table1');
const data2 = getTableData(document.querySelector('#table2'));

Comments

[maks78945]

Спасибо огромное, а подскажите пожалуйста, а как мне вызвать функцию если у меня есть несколько дивов (с разными id), но одинаковыми таблицами?

<div id='div1'>
	<table id='table1'>
	....
	</table>
	<table id='table2'>
	....
	</table>
</div>
<div id='div2'>
	<table id='table1'>
	....
	</table>
	<table id='table2'>
	....
	</table>
</div>

[0xD34F]

maks78945,

а как мне вызвать функцию если

так же, как и всегда - пишите имя функции, после него круглые скобки

Answer 2

[Stockholm Syndrome]

const getData = (tableSelector) => {
  return [...document.querySelectorAll(`${tableSelector} td[data-name]`)].reduce((acc, td) => ({
    ...acc, 
    [td.dataset.name]: td.firstElementChild.value
  }), {});
};


const data1 = getData('#table1');
const data2 = getData('#table2');