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

[Davert Tanz]

Имеется код, который высчитывает количество дней в месяце и создает таблицу с этим количеством колонок. Вопрос - почему на странице создается таблица не с одной строкой и кучей колонок, а для каждой колонки новый <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>';

[bes]

сделай тестовый пример, кнопка запуска [html run]
UPD: хотя спи спокойно, браузер всё сделал за тебя

[Vlasenko Fedor]

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

[newobject]

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. Медвежья услуга, мля.

[Aetae]

Потому что после вставки 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]

У вас есть целых два способа создавать таблицы по-человечески:

есть ещё фрагменты, но вроде как польза от них стала не столь ощутимой

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

[Aetae]

bes, где ты тут собрался применять фрагменты?
Они имеют смысл при вставке нескольких нод в живой dom(тот что уже есть на странице). Никакого смысла их использовать при генерации цельного элемента нет.

[bes]

bes, где ты тут собрался применять фрагменты?
Они имеют смысл при вставке нескольких нод в живой dom(тот что уже есть на странице). Никакого смысла их использовать при генерации цельного элемента нет.

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

[newobject]

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 заруливает на всем.

[bes]

newobject, где тест, где кнопка запуска