1

Есть 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}", то все работает и результат мне подходит. Но мне нужно реализовать заполнение отдельной функцией по уже созданной таблице. С чем я должен взаимодействовать и как реализовать логику? Вроде бы просто, но я запнулся...

1 ответ 1

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>

4
  • Может я ошибаюсь, но Ваш код не работает. Но и и это не совсем то, что мне нужно... По одному обработчику я создал таблицу R строк на C столбцов. Теперь я хочу получить уже созданные в DOM элементы tr или td (или и то и другое) и взаимодействовать с ними (пройтись скажем forEach или другим методом) и задать нумерацию по типу : 11 12 13 21 22 23 31 32 33 И так от R до С
    – t0rum
    18 дек 2021 в 12:35
  • код работает. Создайте отдельную функцию с двумя циклами, где аргументы принимают количество строк и колонок и на каждой итерации используйте setCellValue 18 дек 2021 в 12:52
  • Понял! Да, так работает) Благодарю!
    – t0rum
    18 дек 2021 в 13:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.