Главная > Блог > Web-разработка > JavaScript и TypeScript >

Динамическое формирование списка и таблицы

10.06.2010

При использовании AJAX часто возникает задача динамического формирования элементов HTML-страницы с использованием DOM — на основе данных, полученных от сервера. Сегодня мы рассмотрим примеры составления списка и таблицы.

Формирование списка из данных JavaScript

В приведенном ниже коде функция createList() принимает в качестве аргумента массив и преобразует его в список:

function createList(data) {
  var list = document.createElement("ul");
  for (var i = 0; i < data.length; i++) {
    var newItem = document.createElement("li");
    var newText = document.createTextNode(data[i]);
    newItem.appendChild(newText);
    list.appendChild(newItem);
  }
  return list;
}

window.onload = function() {
  var list = createList(["one", "two", "three", "four", "five"]);
  document.body.appendChild(list);
}

Формирование таблицы из данных JavaScript

Составить целую таблицу немного сложнее. Для этого прежде всего придется воспользоваться элементом <tbody>, а возможно, <tfoot> либо обоими элементами вместе. В противном случае в окне браузера Internet Explorer ничего не появится.

Вспомогательная функция createTable() воспринимает многомерный массив, каждый элемент которого представляет собой отдельный список значений, отображаемых в таблице. Первый элемент массива содержит текст заголовка каждого столбца таблицы.

Как видите, приведенный ниже код для составления таблицы получился длиннее, но, с другой стороны, сохраняется тот же подход: сначала создаются узлы, включая и текстовые, а затем они присоединяются друг к другу в нужном порядке:

function createTable(data) {
  var table = document.createElement("table");
  var thead = document.createElement("thead");
  var tr = document.createElement("tr");
  for (var i = 0; i < data[0].length; i++) {
    var th = document.createElement("th");
    var newText = document.createTextNode(data[0][i]);
    th.appendChild(newText);
    tr.appendChild(th);
  }
  thead.appendChild(tr);
  table.appendChild(thead);
  
  var tbody = document.createElement("tbody");
  for (var i = 1; i < data.length; i++) {
    var tr = document.createElement("tr");
    for (var j=0; j < data[i].length; j++) {
      var td = document.createElement("td");
      var newText = document.createTextNode(data[i][j]);
      td.appendChild(newText);
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }

  table.appendChild(tbody);
  return table;
}

window.onload = function() {
  var table = createTable([
    ["1", "2", "3", "4", "5"],
    ["one", "two", "three", "four", "five"],
    ["un", "deux", "trois", "quatre", "cinq"],
    ["один", "два", "три", "четыре", "пять"]]);
  document.body.appendChild(table);
}

Поиск: JavaScript • Web-разработка