Создание таблиц циклом
Имеется код, который высчитывает количество дней в месяце и создает таблицу с этим количеством колонок. Вопрос - почему на странице создается таблица не с одной строкой и кучей колонок, а для каждой колонки новый <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, где тест, где кнопка запуска
|
Часовой пояс GMT +3, время: 21:37. |