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
    Commented 18 дек. 2021 в 12:35
  • код работает. Создайте отдельную функцию с двумя циклами, где аргументы принимают количество строк и колонок и на каждой итерации используйте setCellValue Commented 18 дек. 2021 в 12:52
  • Понял! Да, так работает) Благодарю!
    – t0rum
    Commented 18 дек. 2021 в 13:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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