Как создать двухмерный массив данные из нескольких input JS?

Question

[djok_uzb]

<tr>
	<td><input data-id="r1c1" data-class="c1" value="101" disabled></td>
	<td><input data-id="r1c2" data-class="c2"></td>
	<td><input data-id="r1c3" data-class="c3"></td>
	<td><input data-id="r1c4" data-class="c4"></td>
	<td><input data-id="r1c5" data-class="c5"></td>
	<td><input data-id="r1c6" data-class="c6"></td>
	<td><input data-id="r1c7" data-class="c7"></td>
</tr>
<tr>
	<td><input data-id="r2c1" data-class="c1" value="102" disabled></td>
	<td><input data-id="r2c2" data-class="c2" value="21"></td>
	<td><input data-id="r2c3" data-class="c3" value="22"></td>
	<td><input data-id="r2c4" data-class="c4" value="23"></td>
	<td><input data-id="r2c5" data-class="c5" value="24"></td>
	<td><input data-id="r2c6" data-class="c6" value="25"></td>
	<td><input data-id="r2c7" data-class="c7" value="26"></td>
</tr>

Данные из этих input нужно записать в двухмерный массив + при изменение в input данные автоматически должен меняться данные в массиве

Answer 1

[0xD34F]

Сколько tbody у таблицы? Одна штука:

document.querySelector('tbody').addEventListener('input', function() {
  const data = Array.from(
    this.children,
    tr => Array.from(tr.querySelectorAll('input'), input => input.value)
  );

  console.log(data);
});

Несколько:

document.querySelector('table').addEventListener('input', e => {
  const { map, flatMap } = Array.prototype;
  const data = flatMap.call(
    e.currentTarget.tBodies,
    tbody => map.call(
      tbody.rows,
      tr => map.call(tr.cells, td => td.lastElementChild.value)
    )
  );

  console.log(data);
});

// или

document.querySelector('table').addEventListener('input', function() {
  const numHeadRows = this.querySelectorAll('thead tr').length;
  const data = [];

  for (const input of this.querySelectorAll('tbody input')) {
    const td = input.parentNode;
    const iCol = td.cellIndex;
    const iRow = td.parentNode.rowIndex - numHeadRows;
    (data[iRow] ??= [])[iCol] = input.value;
  }

  console.log(data);
});

Comments

[djok_uzb]

я не так уж хорошо знаю js но этот же код можно как-нибудь написать чтоб чайник понимал что там и как работает

[0xD34F]

djok_uzb, ваш комментарий безумен. В нём содержится неявное предположение, что я способен телепатически определить степень вашей компетентности. Нет, я такого не могу. И никто не может. Телепатии не существует. Хотите каких-то пояснений - будьте более конкретны, укажите, что именно вам непонятно.

[djok_uzb]

Спасибо за ответ. Мне не понятно

this.children,
    tr => Array.from(tr.querySelectorAll('input'), input => input.value)

+ как можно использовать этот же массив в другом функции

Попробовал так:

function input() {
  const data = Array.from(
    this.children,
    tr => Array.from(tr.querySelectorAll('input'), input => input.value)
  );
  return data
}

document.querySelector('tbody').addEventListener('input', input);

console.log(data);

не работает

[0xD34F]

djok_uzb, почитайте, что такое Array.from.

"Не работает" - а куда там, по-вашему, возвращается data? И с какого перепугу переменная, объявленная внутри функции, должна быть доступна снаружи? Хотите, чтобы массив data был доступен снаружи - там и объявите его, а внутри input обновляйте. Можно не целиком, а, как в соседнем ответе предлагается, только изменённый элемент. Например.

Answer 2

[Somewhere Intech]

Каждой r и c убрал единицу..

var data = []
function change(node){
	let [  row, col  ] = node.dataset.id.substring(1,).split('c').map(v => --v);
	if (!data[row]) data[row] = [];
	if (node.value) data[row][col] = +node.value;
}

document.querySelectorAll('input').forEach( node => {
	change(node);
	node.addEventListener('change', e => change(e.target));
});