Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Создание таблицы (https://javascript.ru/forum/dom-window/64344-sozdanie-tablicy.html)

warren buffet 10.08.2016 06:26

Цитата:

Сообщение от renatdmit
appendChild

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

renatdmit 10.08.2016 07:35

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

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

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

warren buffet 10.08.2016 09:12

Цитата:

Сообщение от renatdmit
ибо не все владеют английским

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

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

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

warren buffet 10.08.2016 09:19

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

renatdmit 10.08.2016 11:04

Цитата:

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

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

MallSerg 10.08.2016 11:27

Цитата:

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

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

рони 10.08.2016 11:38

Цитата:

Сообщение от renatdmit
работают в разы быстрее.

:yes:

warren buffet 10.08.2016 11:59

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

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

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

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

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

renatdmit 10.08.2016 12:04

Цитата:

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

Я никогда и ни во что не верую. Именно поэтому я и задал вопрос 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>

рони 10.08.2016 12:11

: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>


Часовой пояс GMT +3, время: 21:58.