Динамическое формирование списка и таблицы
10 Июль 2008, 11:56
При использовании AJAX часто возникает задача динамического формирования элементов HTML-страницы с использованием DOM — на основе данных, полученных от сервера. Сегодня мы рассмотрим примеры составления списка и таблицы.
Формирование списка из данных JavaScript
В приведенном ниже коде функция createList() принимает в качестве аргумента массив и преобразует его в список:
<script language="JavaScript" type="text/javascript">
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);
}
</script>
Формирование таблицы из данных JavaScript
Составить целую таблицу немного сложнее. Для этого прежде всего придется воспользоваться элементом <tbody>, а возможно, <tfoot> либо обоими элементами вместе. В противном случае в окне браузера Internet Explorer ничего не появится.
Вспомогательная функция createTable() воспринимает многомерный массив, каждый элемент которого представляет собой отдельный список значений, отображаемых в таблице. Первый элемент массива содержит текст заголовка каждого столбца таблицы.
Как видите, приведенный ниже код для составления таблицы получился длиннее, но, с другой стороны, сохраняется тот же подход: сначала создаются узлы, включая и текстовые, а затем они присоединяются друг к другу в нужном порядке:
<script language="JavaScript" type="text/javascript">
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);
}
</script>
