Создание таблиц циклом
Имеется код, который высчитывает количество дней в месяце и создает таблицу с этим количеством колонок. Вопрос - почему на странице создается таблица не с одной строкой и кучей колонок, а для каждой колонки новый <tbody> и <tr> ? Получается что каждая колонка оборачивается в строку. Пожалуйста, подскажите как решить проблему.
var table = document.createElement('table');
table.innerHTML = '<tbody><tr>';
for (i = 1; i < lastDate; i++) {
table.innerHTML += '<td></td>';
}
table.innerHTML += '</tr></tbody>';
|
сделай тестовый пример, кнопка запуска [html run]
UPD: хотя спи спокойно, браузер всё сделал за тебя |
var table = document.createElement('table');
var html = '<tbody><tr>';
for (i = 1; i < lastDate; i++) {
html += '<td></td>';
}
table.innerHTML = html + '</tr></tbody>';
так уже получше должно быть http://learn.javascript.ru/task/kalendar |
Poznakomlus,
Похоже вот так тоже сработает:
var table = document.createElement('table');
var html = '';
for (i = 1; i < lastDate; i++) {
html += '<td></td>';
}
table.innerHTML = html
Именно в этом причина непонятки TC'a:) Я около часа голову ломал. Браузер, по-ходу, сам оборачивает td в tr и tbody. Медвежья услуга, мля. |
Потому что после вставки innerHTML браузер парсит результат,(потому как код, что логично, считается завершённым, откуда ему знать что Вася в следующей строчке или через десять колбэков снова использует innerHTML) и пытается из того говна что вы туда запихнули сотворить валидный dom.
Это не говоря о том что "foo += bar" - это на самом деле "foo = foo + bar", и, соответственно, каждый раз делая "el.innerHTML+=str" вы перезаписываете всё заново. Это самые-самые базовые знания.
var table = document.createElement('table');
// Создаём таблицу, всё ок: <table></table>
console.log(1, table.outerHTML) // <table></table>
table.innerHTML = '<tbody><tr>';
// Браузер видит: "<table>*!*<tbody><tr>*/!*</table>", думает "Хуйня какая-то, наверное надо закрыть теги..." и в итоге:
console.log(2, table.outerHTML) // <table><tbody><tr>*!*</tr></tbody>*/!*</table>
table.innerHTML += '<td></td>';
// Браузер видит: "<table><tbody><tr></tr></tbody>*!*<td></td>*/!*</table>", думает "Что за гавно?! Наверное он имел ввиду" :
console.log(3, table.outerHTML) // <table><tbody><tr></tr></tbody>*!*<tbody><tr><td></td></tr></tbody>*/!*</table>
table.innerHTML += '</tr></tbody>';
// Браузер видит: "<table><tbody><tr></tr></tbody><tbody><tr><td></td></tr></tbody>*!*</tr></tbody>*/!*</table>", думает:
// "Ну пиздец, хз что он имел ввиду." и игнорирует:
console.log(4, table.outerHTML) // <table><tbody><tr></tr></tbody><tbody><tr><td></td></tr></tbody></table>
P.S. В ie<9 таблицам вообще нельзя innerHTML если что. У вас есть целых два способа создавать таблицы по-человечески:
var table = document.createElement('table'),
tr = table.appendChild(document.createElement('tbody'))
.appendChild(document.createElement('tr'));
for (i = 1; i < lastDate; i++) {
tr.appendChild(document.createElement('td'));
}
var table = document.createElement('table'),
tr = table.insertRow();
for (i = 1; i < lastDate; i++) {
tr.insertCell();
}
но нет же... |
Цитата:
Цитата:
|
bes, где ты тут собрался применять фрагменты?
Они имеют смысл при вставке нескольких нод в живой dom(тот что уже есть на странице). Никакого смысла их использовать при генерации цельного элемента нет. |
Цитата:
в целом, завёл речь о фрагментах, так как давно не заглядывал в эту ветку учебника и удивился, что фрагменты уже стали не в моде |
Aetae,
function first(j){
var table = document.createElement('table')
var tr = table.appendChild(document.createElement('tbody')).appendChild(document.createElement('tr'));
for (var i = 1; i < j; i++) {
tr.appendChild(document.createElement('td'));
}
table1=table
}
function second(j){
var table = document.createElement('table')
var tr = table.insertRow();
for (var i = 1; i < j; i++) {
tr.insertCell();
}
table2=table
}
function third(j){
var table = document.createElement('table')
var str=""
for (var i = 1; i < j; i++) {
str+="<td></td>"
}
table.innerHTML=str
table3=table
}
Прогнал по 10000 раз (j=10000) Из этих 3-х вариантов 2-й -- самый плохой. Опера вообще не понимает insertRow, хром: //first: 27.000ms //second: 1557.000ms //third: 19.000ms опера: //first: 84ms (83812µsec) //third: 24ms (23876µsec) FF вроде ровно, в IE не проверял (как поставить новый IE на XP, кстати?). В любом случае, third заруливает на всем. |
newobject, где тест, где кнопка запуска
|
test=function(fu, i){
console.time(fu.name)
while(i--){fu()}
console.timeEnd(fu.name)
}
function first(j){
var table = document.createElement('table')
var tr = table.appendChild(document.createElement('tbody')).appendChild(document.createElement('tr'));
for (var i = 1; i < j; i++) {
tr.appendChild(document.createElement('td'));
}
table1=table
}
function second(j){
var table = document.createElement('table')
var tr = table.insertRow();
for (var i = 1; i < j; i++) {
tr.insertCell();
}
table2=table
}
function third(j){
var table = document.createElement('table')
var str=""
for (var i = 1; i < j; i++) {
str+="<td></td>"
}
table.innerHTML=str
table3=table
}
i=1
j=10000
test(function frst(){first(j)}, i)
test(function scd(){second(j)}, i)
test(function thd(){third(j)}, i)
document.body.appendChild(table1)
document.body.appendChild(table2)
document.body.appendChild(table3)
|
Таки да http://jsperf.com/table-create-vs .
Только вот ie8 пока ещё актуален. |
newobject,
15 строка чтоб first подольше выполнялась? |
рони, та-а, опечатка. Там надо пару миллиардов итераций что оно сказалось.)
|
Цитата:
|
Ребят, всем спасибо. Все прочитаю, во всем разберусь! Спасибо за исчерпывающую информацию!:)
|
| Часовой пояс GMT +3, время: 07:48. |