Создание таблицы с помощью javascript

Рассмотрим способ создания таблицы в HTML документе с помощью javascript.
1. Создание таблицы
Для того, чтобы создать новую таблицу на странице нужно сгенерировать элемент TABLE (createElement()) и добавить его в иерархическую структуру документа с помощью метода appendChild().
Пример 1.

var new_table= document.createElement('table');
new_table.id='i_user_table'; //Задаете уникальный id таблицы
document.body.appendChild(new_table);

2. Добавление/удаление столбцов и/или строк.
Для вставки строк используется метод insertRow(), ячеек — insertCell():
Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell().
Так же для добавления можно использовать элемент createElement() с атрибутом tr (для добавления строки) и td (для добавления ячейки).
Пример 2.

var new_table=document.createElement("table");

var newRow=new_table.insertRow(0);
var newCell = newRow.insertCell(0);
newCell.innerHTML="строка 1 столбец 1";
var newCell = newRow.insertCell(1);
newCell.innerHTML="строка 1 столбец 2";

var newRow=new_table.insertRow(1);
var newCell = newRow.insertCell(0);
newCell.innerHTML="строка 2 столбец 1";
var newCell = newRow.insertCell(1);
newCell.innerHTML="строка 2 столбец 2";

document.body.appendChild(new_table);

Для автоматического создания таблицы в javascript можно использовать следующую функцию:
Пользовательская функция user_table(i_row, i_cell,i_ID)

function user_table(i_row, i_cell,i_ID){
// i_row - строчки
// i_cell - столбцы
var tbl = document.createElement('table');
tbl.id=i_ID;
var tblBody = document.createElement("tbody");
for (var i=0; i<i_row; i++){
var row = document.createElement("tr");
for (var j=0; j<i_cell; j++){
var cell = document.createElement("td");
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
return tbl;
}

Далее данная функция должна быть вызвана в коде Вашей программы и таблица добавлена в иерархическую структуру документа.
Пример 1

var new_table=user_table(1, 3, "new_table");
document.body.appendChild(new_table);

или в определенное место в документе, например, в элемент с ID: 'modal-body'.
Пример 2

var new_table=user_table(1, 3, "new_table");
document.getElementById('modal-body').appendChild(new_table);

 

Для того, чтобы изменить значение переменных в ячейках таблицы необходимо воспользоваться переменными rows и cells.
Пример:

var table = document.getElementById("id_table");
for (var r = 0; r < table.rows.length; r++) {
//цикл по строчкам таблицы <tr>
for (var c = 0; c < table.rows[r].cells.length; c++) {
//цикл по ячейкам (столбец) таблицы для заданной строчки <td>
table.rows[r].cells[c].innerHTML="Добавляем информацию в ячейки таблицы";
}
}

Функция getElementById возвращает коллекцию элементов с заданным id.
Представленный пример создает цикл по каждой строчке (<tr>), а для каждой строки создается цикл по каждому столбцу (ячейки заданной стройки) (<td>) .

К значениям переменных в ячейках таблицы можно обратиться другим способ используя переменные getElementsByTagName("tr") и getElementsByTagName("td").
Пример:

var table = document.getElementById("id_table");
var tr = table.getElementsByTagName("tr");
for (var r=0; r<tr.length; r++)
//цикл по строчкам таблицы <tr>
{
td = tr[r].getElementsByTagName("td");
for (var c=0; c<td.length;c++)
//цикл по ячейкам (столбец) таблицы для заданной строчки <td>
{
td[c].innerHTML="Добавляем информацию в ячейки таблицы";
}
}