Заполнить таблицу HTML номерами строк и столбцов через JS

Question

Есть 2 инпута для ввода числа строк и столбцов, по клику на кнопке создается таблица с нужными параметрами.

function createTable() {
  const tableGrid = document.querySelector(".table-grid");
  tableGrid.innerHTML = "";
  const table = document.createElement("table");
  table.className = "table";
  const rowValue = document.querySelector("#row-count").value;
  const columnValue = document.querySelector("#column-count").value;

  for (let i = 0; i < rowValue; i++) {
    const tr = document.createElement("tr");
    for (let j = 0; j < columnValue; j++) {
      const td = document.createElement("td");
      tr.append(td);
      // td.innerHTML = `${i + 1}${j + 1}`;
    }
    table.append(tr);
  }

  tableGrid.append(table);
}

const myButton = document.querySelector(".button");
myButton.addEventListener("click", createTable);

если реализовать в самом цикле "td.innerHTML = ${i + 1}${j + 1}", то все работает и результат мне подходит. Но мне нужно реализовать заполнение отдельной функцией по уже созданной таблице. С чем я должен взаимодействовать и как реализовать логику? Вроде бы просто, но я запнулся...

Answer 1

Можно в data атрибут записывать айди ячейки и в дальнейшем менять по нему значения. Первое число id = строке, второе = колонке.

const createTable = () => {
  const tableGrid = document.querySelector('.table-grid');
  tableGrid.innerHTML = '';
  const table = document.createElement('table');
  table.className = 'table';
  const rowValue = document.querySelector('#row-count').value;
  const columnValue = document.querySelector('#column-count').value;

  for (let i = 0; i < rowValue; i++) {
    const tr = document.createElement('tr');
    for (let j = 0; j < columnValue; j++) {
      const td = document.createElement('td');
      td.dataset.id = `${i + 1}${j + 1}`;
      tr.append(td);
    }
    table.append(tr);
  }

  tableGrid.append(table);
};

const setCellValue = (cellId, value) => {
  const cell = document.querySelector(`[data-id="${cellId}"]`);
  cell.textContent = value;
};

const myButton = document.querySelector('.button');
myButton.addEventListener('click', createTable);

const setValue = document.getElementById('set-value');
setValue.addEventListener('click', () => {
  const id = document.querySelector('#cell-id').value;
  const value = document.querySelector('#cell-value').value;
  setCellValue(id, value);
});

.mb-1 {
  margin-bottom: 1rem;
}

<div class="mb-1">
  <input type="text" id="row-count" placeholder="rows" />
  <input type="text" id="column-count" placeholder="columns" />
  <button class="button">Create table</button>
</div>
<div class="mb-1">
  <input type="text" id="cell-id" placeholder="id" />
  <input type="text" id="cell-value" placeholder="value" />
  <button id="set-value">Set cell value</button>
</div>
<div class="table-grid"></div>

БЛОГ НА HUSL

Заполнить таблицу HTML номерами строк и столбцов через JS

Ответы (1 шт):