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

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]

Чтобы несколько раз одно и то же дальше не писать, небольшой декоратор:

const queryIfSelector = f => x =>
  f(typeof x === 'string' ? document.querySelector(x) : x);

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

const getTableData = queryIfSelector(table =>
  Array.from(table.querySelectorAll('tbody tr'), tr =>
    Object.fromEntries(Array.from(tr.querySelectorAll('td'), td => [
      td.getAttribute('data-name'),
      td.querySelector('input').value,
    ]))
  )
);

// или

const getTableData = queryIfSelector(table =>
  Array.prototype.flatMap.call(table.tBodies, tbody =>
    Array.prototype.map.call(tbody.rows, tr =>
      Array.prototype.reduce.call(tr.cells, (acc, td) => (
        acc[td.dataset.name] = td.firstElementChild.value,
        acc
      ), {})
    )
  )
);

// или

const getTableData = queryIfSelector(table => {
  const result = [];
  const numHeadRows = table.querySelectorAll('thead tr').length;

  for (const input of table.querySelectorAll('tbody input')) {
    const td = input.closest('td');
    const i = td.parentNode.rowIndex - numHeadRows;
    const item = result[i] = result[i] || {};
    item[td.attributes['data-name'].value] = input.value;
  }

  return result;
});

Достаём:

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