Javascript

Как создать динамическую таблицу в HTML с помощью JavaScript

24.03.2023

Создание динамической HTML-таблицы — одна из самых распространенных задач веб-разработчиков. Таблицы используются не только для отображения данных, но и как интерфейсы. В этой статье мы рассмотрим, как создать динамическую таблицу в HTML с помощью JavaScript .

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

Создаем таблицу

JavaScript


let dataTable = document.createElement('table');
dataTable.setAttribute('id', 'dataTable');
document.body.appendChild(dataTable);

С помощью метода document.createElement создаем нашу таблицу.
Затем зададим ей идентификатор - dataTable.setAttribute('id', 'dataTable')
После этого добавим нашу таблицу к элементу <body> - document.body.appendChild(dataTable);.

Создаем заголовки нашей таблицы

JavaScript


let tableHeadRow = dataTable.insertRow(0);
let tableHeadArray = new Array();
tableHeadArray = ['Имя', 'Должность', 'Возраст', 'Опции'];
for (let i = 0; i < tableHeadArray.length; i++) {
  let th = document.createElement('th');
  th.innerHTML = tableHeadArray[i];
  tableHeadRow.appendChild(th);
}

С помощью метода insertRow() создаем новую строку в таблице.
Затем сохраним все названия столбцов в массив - tableHeadArray и с помощью цикла for получим каждый элемент.
Далее создаем <th> элемент - document.createElement('th')
Сохраним каждое значение в массиве в динамически генерируемом теге <th> - th.innerHTML
И добавим каждый столбец в нашу строку - tableHeadRow.appendChild(th)

Создаем дополнительные поля для таблицы
Для этого нужно в HTML файле создать несколько полей для ввода информации и кнопку для добавления строки к нашей таблице.
Выглядеть это может примерно так:

HTML


Имя: <input type="text" id="name">
Должность: <input type="text" id="job">
Возраст: <input type="text" id="age">
<button id="addRow">Добавить строку</button>

Далее нужно добавить к нашему скрипту следующий код:

JavaScript


document.getElementById("addRow").addEventListener("click", function(){

  const name = document.getElementById("name");
  const job = document.getElementById("job");
  const age = document.getElementById("age");

  let tr = dataTable.insertRow(-1);

  let tableDataArray = new Array();
  tableDataArray = [name.value, job.value, age.value];
			
  for (let i = 0; i < tableDataArray.length; i++) {
    let td = tr.insertCell(-1);
    td.innerHTML = tableDataArray[i];
  }

  let td = tr.insertCell(-1);

  let button = document.createElement('button');
  button.setAttribute('type', 'button');
  button.innerHTML = 'Удалить';

  button.setAttribute('onclick', 'delRow(this)');
  td.appendChild(button);

  name.value = "";
  job.value = "";
  age.value = "";

});

Здесь мы сначала сохраняем в константы все текстовые поля для ввода данных, таких как "имя", "работа" и "возраст".
Затем добавим строку в таблицу - dataTable.insertRow(-1). Здесь нужно указать (-1) для того, чтобы строка добавилась ниже заголовков, если указать (0), то новая строка будет добавляться выше наших заголовков.
С помощью метода dataTable.insertCell(-1) добавляем данные в ячейки.
Также мы создаем элемент кнопки для удаления строки, вешаем на нее событие и функцию, которая будет обрабатывать это событие delRow(this), в конце добавляем ее в последнюю ячейку - td.appendChild(button).

Функция, которую мы подключили у кнопке в таблице выглядит примерно так:

JavaScript


function delRow(el) {
  let uTable = document.getElementById('dataTable');
  uTable.deleteRow(el.parentNode.parentNode.rowIndex); 
}

Здесь мы с помощью метода deleteRow удаляем не нужную нам строку.

Полный код скрипта динамической таблицы

JavaScript


let dataTable = document.createElement('table');
dataTable.setAttribute('id', 'dataTable');
document.body.appendChild(dataTable);

let tableHeadRow = dataTable.insertRow(0);
let tableHeadArray = new Array();
tableHeadArray = ['Имя', 'Должность', 'Возраст', 'Опции'];

for (let i = 0; i < tableHeadArray.length; i++) {
  let th = document.createElement('th');
  th.innerHTML = tableHeadArray[i];
  tableHeadRow.appendChild(th);
}

document.getElementById("addRow").addEventListener("click", function(){

  const name = document.getElementById("name");
  const job = document.getElementById("job");
  const age = document.getElementById("age");

  let tr = dataTable.insertRow(-1);

  let tableDataArray = new Array();
  tableDataArray = [name.value, job.value, age.value];
					
  for (let i = 0; i < tableDataArray.length; i++) {
    let td = tr.insertCell(-1);
    td.innerHTML = tableDataArray[i];
  }

  let td = tr.insertCell(-1);

  let button = document.createElement('button');
  button.setAttribute('type', 'button');
  button.setAttribute('class', 'row__button');
  button.innerHTML = 'Удалить';

  button.setAttribute('onclick', 'delRow(this)');
  td.appendChild(button);

  name.value = "";
  job.value = "";
  age.value = "";
});

function delRow(el) {
  let uTable = document.getElementById('dataTable');
  uTable.deleteRow(el.parentNode.parentNode.rowIndex); 
}

Оформление внешнего вида таблицы

В заключении нужно будет оформить нашу таблицу с помощью стилей под дизайн нашего сайта. Сделать это можно с помощью отдельного файла стилей или с помощью скрипта.

data-table

Для того, чтобы такая таблица могла полноценно работать, нужно сделать так, чтобы данные внесенные в нее сохранялись в базе данных.
Надеемся, что эта статья поможет вам при создании динамических таблиц.

Метки: таблица

Как создать динамическую таблицу в HTML с помощью JavaScript

Отменить ответ