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

Почему не создаются ячейки? https://jsfiddle.net/L9o4jamy/

потому что их надо создать

DivMan,
строку 3 перенесите в цикл, в строку 9 в конец

то есть в тело цикла, надо написать var td = document.createElement('td')?

DivMan,
да

на строке 9 начинается цикл, какой смысл его переносить в конец?

DivMan, https://jsfiddle.net/L9o4jamy/2/

Таблицы так не делаются, у них есть свои методы специально для

var 

c = 'onces,upon,atime'.split(','),

Table = document.body.appendChild(document.createElement('table'));

	
for(var i = 0; i < 3; i++) {

  var row=Table.insertRow(Table.rows.length);
     
     for(var j=0; j< c.length; j++) {
          var cell=row.insertCell(j);
          cell.appendChild(document.createTextNode(c[j]+j));
     }

}

https://jsfiddle.net/L9o4jamy/4/

warren buffet,
... одобрямс :) плюса ставить не буду, а то сглажу ещё

warren buffet,

А чем метод insertRow предпочтительней appendChild, кроме того, что "так не делается"?

Иди да почитай ману https://developer.mozilla.org/en-US/...ment/insertRow

warren buffet,
Почитал ману и что?
Во-первых не очень корректно давать на русскоязычном форуме ссылку на англоязычный текст, ибо не все владеют английским. Но поскольку так случилось что английским я по стечению обстоятельств владею, то...

во-вторых: в тексте по ссылке нет ни слова о том, почему insertRow предпочтительней appendChild.

Если создавать таблицу с нуля, то insertRow с точки зрения читабельности кода да, удобней. Если же таблица уже есть, то через cloneNode и appendChild удобней и грамотней копировать строки, а на больших объемах еще и в разы производительней.

Конечно не все, а кодеры - владеют. Или ты на русском пишешь <див ид="главный-див", а потом .главный-див {ширина:1000пикс;}, а потом еще документ.дайЭлементПоИд...

Да или нет? Так что ты владеешь и читай, ибо все что касается компов написано по-английски.

Новая таблица - это частный случай, конкретный. На практике строки удаляются и вставляются в готовую таблицу и аппендить там нечего, ибо есть предусмотренные методы.

То есть тебе мало непонятного поведения input+datalist, тебе надо все сделать непонятным, чтобы веселее стало жить. Так вот, тогда не со мной спорь, а иди на w3c.org и там качай права касательно своего видения устройства веб-технологий.

Вот как раз при вставлении строк в существующую таблицу методы cloneNode и append проще и работают в разы быстрее.

Ты в это веруешь?
или способен показать наглядно преимущество?

:yes:

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

В разы быстрее - это скажем вместо 0.0003 будет 0.00005 и что с того? С таблицей с миллионом строк может стать заметной разница, но где оппонент такие таблицы-то видел на вебе и кто вообще такими сможет оперировать?

Но тут важен не выбор метода, а смысл темы. ТС просто не знал про инсерты и применил известный ему метод как просто известный и освоенный, а вовсе не с явным умыслом ускорить там чего-то блин.

Бенчмарк для страждущих правды. http://pastie.org/482023

Кстати, инсерт работает с таблицей, а для аппенда нужно еще tbody создать явно или явно получить. Иначе твой аппенд нафигачит строк в межклеточное пространство.

Я никогда и ни во что не верую. Именно поэтому я и задал вопрос warren buffet, на который до сих пор не получил внятного ответа, ни единого аргумента в пользу insertRow кроме каких-то глупых ссылок и бестолкового хамства.

С мое стороны аргументы простые:

1) cloneNode + AppendChild позволяет не создавать в цикле ячейки через insertCells, ячейки просто копируются из любой строки

2) Скорость. Я провел тесты. Создайте в HTML таблицу с десятью колонками и одной строкой. Теперь проверьте работу двух алгоритмов: сначала попробуйте создать какое-либо большое количество строк с помощью InsertRows + insertCells, заполнив их какими-нибудь данными, ну например цифрами с 1 по 10 по номеру колонок. А затем то же количество колонок с помощью cloneNode и appendChild, также заполняя их содержимым. Я получил разницу в разы в пользу второго варианта.

Мой код:

<html>
<head>
</head>
<body>
<table>
<THEAD><TR><TH>Man</TH><TH>Woman</TH><TH>Girl</TH><TH>Boy</TH><TH>Dog</TH>
<TH>Man</TH><TH>Woman</TH><TH>Girl</TH><TH>Boy</TH><TH>Dog</TH></TR></THEAD>
<TBODY>
<TR><TD>Ivan</TD><TD>Maria</TD><TD>Olga</TD><TD>Victor</TD><TD>Sharic</TD>
<TD>Ivan</TD><TD>Maria</TD><TD>Olga</TD><TD>Victor</TD><TD>Sharic</TD></TR>
</TBODY>
</table>
<input type = button onclick = "throughInsert()" value = Insert />
<input type = button onclick = "throughAppend()" value = Append />
</body>
</html>

<script type="text/javascript">

var cnt = 10000;

function throughInsert() 
{
	
table = document.querySelector("TABLE");

for(i = 2; i < cnt; i++)
{
	row = table.insertRow(i);
	row.insertCell().innerHTML = i;
	for(j = 2; j<11; j++)
	{
		row.insertCell().innerHTML = j;
	}
	 
}  

alert("finish");
     
}

function throughAppend() 
{

tbody = document.querySelector("TABLE TBODY");	
rowPatt = tbody.querySelector("TR");

for(i = 1; i < cnt; i++)
{
	row = rowPatt.cloneNode(true);
	row.cells[0].innerHTML = i;
	for(j = 2; j<11; j++)
	{
		row.cells[j - 1].innerHTML = j;
	}
	tbody.appendChild(row);
	
	 
}  

alert("finish");
     
}

</script>

:write:

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>

<script>
var Table = document.body.appendChild(document.createElement('table')), time = performance.now();

for(var i = 0; i < 1000; i++) {
  var row=Table.insertRow(i);
     for(var j=0; j< 1000; j++) {
          var cell=row.insertCell(j);
          cell.appendChild(document.createTextNode([i,j]));
     }

}
alert(performance.now() - time);
  </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>

<script>
var Table = document.body.appendChild(document.createElement('table')), time = performance.now();

for(var i = 0; i < 1000; i++) {
  var row= document.createElement('tr');
     for(var j=0; j< 1000; j++) {
          var cell= document.createElement('td');
          cell.appendChild(document.createTextNode([i,j]));
          row.appendChild(cell)
     }
    Table.appendChild(row)
}
alert(performance.now() - time);
  </script>
</body>
</html>

На 3 тысячах разница уже ощутима при не самом мощном ноуте 8-летней давности. И я не ваш оппонент. Чтобы вам оппонировать нужны от вас какие-то аргументы, отличающиеся от "делай как все, нигилист, а не через жопу".

Это другое дело, но аргументы в пользу того или иного метода все равно нужны, чтобы человек делал сознательный выбор, а не потому что кто-то, тщащийся показаться авторитетным, ему это сказал.

Какой кошмар, это ж неделю кодить придется! :haha:

рони,

Милый друг, я 2 недели назад первый раз открыл первую книжку по javascript, но даже мне не приходит в голову создавать в цикле TD

var cell= document.createElement('td');

когда есть cloneNode

Будьте любезны, посмотрите мой код. И учитесь пока я еще не стал мега гуру и не покинул вас, как безнадежных. :p

Ну если тебе нужна пустая таблица на 1000 строк, то просто нарисуй хтмл в переменной и вставь как innerHTML в body и замерь что быстрее, лал.

warren buffet,

Уважаемый профессор, посмотрите пожалуйста мой код, я заполняю его данными для чистоты эксперимента.

renatdmit,
спасибо, а тест можно что быстрее cloneNode или createElement?

Вот в чем проблема, денег на новый ноут нету, и будем заниматься premature optimization.

warren buffet,
renatdmit,

renatdmit,
warren buffet,

Вот такими да? - row.insertCell().innerHTML = i;

У тебя же нет никакого хтмля в i, там просто число, то есть тут вообще-то .textContent, но, у тебя же нет текстовой ноды, поэтому ты рисуешь .innerHTML, а это значит проворачиваешь для каждой ячейки могучий парсер браузера. Поэтому твой ноут и тормозит как из пушки по воробьям.

Нарисуй массив и сделай из него таблицу своими аппендами.

рони,

В вашем случае вынужден извиниться. AppendChild в цикле работает даже чуть быстрей чем cloneNode, разница процентов в 10. Тормозной только InsertRows. :agree:

Я его одинаково проворачиваю в обоих случаях, тормозит он почему-то только на InsertRow :lol:

Кстати, пустую таблицу можно запузырить в одной строкой в браузере, который понимает String.repeat(count);

document.getElementById('div').innerHTML='<table><tbody>'+('<tr><td>&nbsp;'+('</td><td>&nbsp;'.repeat(8))+'</td></tr>').repeat(10)+'</tbody></table>';

Однако как правило данные уже есть и значит они лежат в массиве, в двумерном само собой. Чтобы не рисовать двумерный массив из циферок, я просто взял лорем ипсум.

<style>
table {
	border-collapse:collapse;
}
table tfoot,
table caption {
	padding:10px;
	background:#000;
	color:#fff;
}
table th,
table td {
	padding:5px;
	border:1px solid #ddd;
}
</style>
</head>
<body>


<div id="tb"></div>

<script>

var cnt=8, a='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc'.split(' '), 
cells= new Array(cnt), 
rows= new Array(cnt), 
cp=a.splice(0,cnt),
hd=a.splice(0,cnt),
ft=a.splice(0,cnt),
w=0;

for(var j=0;j<rows.length;j++) {
	for(var i=0;i<cells.length;i++)
		cells[i]=a[w++];
	rows[j]='<tr><td>'+cells.join('</td><td>')+'</td></tr>';
}

document.getElementById('tb').innerHTML='<table><caption>'+cp.join(' ')+'</caption><thead><tr><th>'+hd.join('</th><th>')+'</th></tr></thead><tfoot><tr><td colspan="'+cnt+'">'+ft.join(' ')+'</td></tr></tfoot><tbody>'+rows.join('')+'</tbody></table>';

</script>

Отсюда вопрос. Если надо создать именно таблицу, то зачем ковырять по элементам, если можно сделать чертеж в тексте, а потом его реализовать запихнув в DOM.

Вставки строк, удаление, перемещение и прочая хрень связанная с по-элементным оперированием - это из другой жоперы. И вот там с аппендами нахрен не надо. А тут не надо ни того ни другого.

warren buffet,

С точки зрения читабельности кода такой подход никуда не годится.
С точки зрения производительности - интересно будет попробовать на больших объемах.

Эта тема мне интересна, потому что первый сайт, который я решил сделать в своей блестящей карьере вэб-программиста, как раз - о чудо - будет считывать данные из базы и выводить - как ни смешно - в таблицу.

Пиши читательно, только кто будет читать твои коды кроме тебя? Или ты веришь что Артемий Лебедев примчится проверить как там на твоих страницах коды читательные или нет. Вообще все нормальные люди как минимум минимизируют скрипты, а как максимум обсфусцируют, так что ничего не прочитаешь даже через дебаггер.

Выводить в таблицу можно на сервере. Ты думаешь 100Кб сильно отличаются от мегабайта при передаче данных в 21-м веке?

ЗЫ 2олл. Это мне один умнег из нлпистов-оптимизаторов как-то написал насчет одного веб-сайта, и там кроме прочего бреда, были два скрина с исходниками сайта и комментарий, дескать надо оптимизировать скрипты и стили. Ну, а что там можно увидеть, если все стили - в одну строку на полстраницы и все скрипты далее в одну строку на вторую половину страницы? То есть три экрана прокрутки из которых почти все три - сплошной текст без единого переноса. Читательно? А вот теперь пойти умнег и посмотри исходник google.com и подивись как в современном мире принято постить веб-страницы.

Кстати, как я понял этот спец собирается заделать data-grid. Так вот я бы посоветовал скачать готовый. Их много разных и почти все бесплатное, ибо таблицы уже давно не нужны никому, поскольку екзель есть на гугле.

warren buffet,

Обычно при выборе тех или иных методов люди выбирают либо чтобы было читабельно, либо чтобы быстро работало, если не удается совместить и первое и второе. Если читабельность кода вам по барабану, производительность вам по барабану. Тогда из каких соображений вы советуете тот или иной метод?

renatdmit, Какая тебе читабельность и производительность нужна еще в то время, как Виндоуз (!) уже давным давно работает на телефонах? Ты вообще знаешь что такое Виндоуз, даже мобильный? Так что запросто можешь идти по пути Микрософт и никто тебе и слова не скажет.

И вообще, к какой читательности ты прицепился в трех строках кода? Что таблица собирается в одной строке? Ну сядь и наделай там переносов через + чтобы понятнее было. Это же жаба, она не понимает переносов в скалярах, а мне переносить было лень.

Ты явно глубокий самоучка программист от сохи. Читабельность кода к производительности программы относится как иголка к стогу сена. Ну хер с ними с интепретаторами, но если у тебя компилятор и он компилирует с документации, с ТЗ, ты вообще как проведешь корреляцию между читабельностью документа и производительностью бинарного кода?

Короче, или вернись в свою деревню, или осваивай цивилизованные методы.