ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / новая строчка в <table>
21 сообщений из 21, страница 1 из 1
новая строчка в <table>
    #35594380
aftar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
aftar
Гость
Господа, вопрос: есть таблица... Как в нее с помощью javascript'a врисовать еще один ряд?
...
Рейтинг: 0 / 0
14.10.2008, 18:56
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35594408
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ex_Soft
Участник
тынць

_________________
"Helo, word!" - 17 errors 56 warnings
...
Рейтинг: 0 / 0
14.10.2008, 19:16
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35594526
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Можно и проще (cloneNode и appendChild). Только хотелось бы знать всякие подробности... . Почитай, что Ex_Soft тынцы даёт.
...
Рейтинг: 0 / 0
14.10.2008, 21:04
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35608282
arbuzov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
arbuzov
Гость
добавляем ряд в таблицу с помощью javascript:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
// создали таблицу (или нашли ее с помощью getElementById)
var table	= mainDiv.appendChild (document.createElement ('table'));
// обязательно нашли ее body
var tablebd = table.appendChild (document.createElement ('tbody'));
// добавили строку
var row = tablebd.appendChild (document.createElement ('tr'));
// добавили ячейку
var cell = row.appendChild (document.createElement ('td'));
// добавили туда что-то
cell.innerHTML = '<b>это что-то</b>';
...
Рейтинг: 0 / 0
22.10.2008, 09:19
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615659
Шогал
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шогал
Участник
Или так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
// создали таблицу (или нашли ее с помощью getElementById)
var table	= mainDiv.appendChild (document.createElement ('table'));
// добавили строку
var row = tablebd.insertRow(tablebd.rows.length);
// добавили ячейку
var cell = row.insertCell( 0 );
// добавили туда что-то
cell.innerHTML = '<b>это что-то</b>';
...
Рейтинг: 0 / 0
24.10.2008, 23:07
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615706
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
ШогалИли так:
Код: plaintext
1.
2.
// добавили строку
var row = tablebd.insertRow(tablebd.rows.length);

примеры давать - это не всегда просто скопипастить. Касательно Вашего примера - 1.tablebd - хз что (хотя я конечно догадываюсь), 2. строки по умолчанию заносятся в tbody, а для работы с thead и tfoot нужно именно к ним обращаться, 3. tablebd.rows.length - зачем лишние буквы и вычисления, если можно написать insertRow(-1).
Ну и если вы с ячейкой ничего больше делать не собираетесь, кроме как добавить и вписать innerHTML, то необязательно создавать под нее переменную: row.insertCell(-1).innerHTML = 'bla-bla-bla'.
Вот и получается, что, с одной строны - все понятно, а с другой - опять возникнут ненужные вопросы.

P.S. вообще-то давно уже пора это вынести куда-нить в faq. У меня даже было желание его оформить, только вот раздела html и js в местном факе не оказалось (обидно, в кои-то веки захотелось че-нить полезное сделать). Подалась было к модератору за помощью, но он молчит как партизан. Конечно надо было к джуджу сходить или на ОНС, но уже не горю желанием писательства. "Прошла любовь, завяли помидоры..."
...
Рейтинг: 0 / 0
25.10.2008, 01:01
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615749
Шогал
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Шогал
Участник
illioninsertRow(-1)
Спасибо, не знал. DOM изучал по w3schools, там про -1 почему-то ни слова
...
Рейтинг: 0 / 0
25.10.2008, 04:20
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615755
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Еще интересный момент, относящийся к оптимизации процесса добавления строк/ячеек: если динамически добавляется строка, затем ячейки, то следует помнить, что меняя любой стиль или наполнение ячейки, мы заново обращаемся к контенту страницы - с каждым "входом" в ячейку. Чтоми минимизировать затраты на добавление строк/ячеек, лучше идти с конца: создавать ячейку, наполнять ее стилями и содержимым и затем добавлять к созданной строке, и когда строка "заполнена", добавлять к таблице.
Для задания в данном топике это уточнение, возможно, не актуально, но при динамическом выводе большого количества строк и тем более ячеек данное замечание более чем действенное. Базируясь на данных, рассмотренных в книге "AJAX в действии", можно утверждать, что скорость вывода полной таблицы увеличится в 1.6-2 раза и может быть еще больше, если ячейки наполняются большим количеством стилей.
...
Рейтинг: 0 / 0
25.10.2008, 05:03
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615763
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
IDVsbruck
звучит вполне логично, хотя насчет 1,6-2 раза могу посомневаться. А нет данных, базирующихся на собственном опыте и экспериментах, а не на некоей книге?
Мне лишь однажды не повезло иметь дело с огромными таблицами, которые зачем-то нужно было обязательно выводить целиком на экран (последствия многолетнего сиденья в экселе). Есть на quirksmode такие данные . Я в своих попытках прошла примерно ту же дорожку методов и сделала ровно тот же итоговый вывод (что innerHTML рулит). Хотя вот у автора табличные методы почему-то самые медленные, у меня тогда они отрабатывали быстрее appendchild (возможно это зависит объема данных или их характера?). Но в итоге innerHTML позволил сократить время вывода с примерно семи минут (для appendchild) до примерно 25 секунд (щас уже не помню точно), причем на больших объемах было видно еще и насколько join работает быстрее конкатенации. (И только увидев результат заказчик понял как ошибался. Вот же блин упертые люди.)

Вообще-то мне тогда хотелось сделать примерно следующее: динамически дом-методами формируется энное количество строк, показывается в браузер, а пока юзер их разглядывает - дорисовывается еще энное кол-во строк. В тот раз я так и не добилась нормального результата, сейчас уже могу изобразить чего-то похожее на правду, но поздно :-). Ну что ж, не всем дано сразу всё мочь.
...
Рейтинг: 0 / 0
25.10.2008, 07:05
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615765
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
ШогалСпасибо, не знал. DOM изучал по w3schools, там про -1 почему-то ни слова
ааа... это есть на msdn (если указано кол-во строк или -1 - то доб. в конец, если число > числа строк или число отрицательное, но не -1 - тогда эксепшн). Ради интересу заглянула кроме w3schools еще и в труд господина Флэнагана: он -1 заносит также в эксепшн (т.е. число=кол-во строк - доб. строку в конец, число > кол-ва строки или число отрицательное - эксепшн). На практике же -1 работает везде где мне надо (ие, фф, опера, konqueror). Так что может и дурной совет дала, но сама буду и дальше писать -1 :-).
...
Рейтинг: 0 / 0
25.10.2008, 07:12
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615790
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
IDVsbruckЕще интересный момент...
Есть у меня один проектик, достаточно важный (сам понимаешь, писал я его с применением JSONP) там табличка (большая) формируется именно таким способом, что ты написал. Интуитивно что-ли прочухал... .
...
Рейтинг: 0 / 0
25.10.2008, 10:26
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35615824
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
ShSerge
Есть у меня один проектик, достаточно важный (сам понимаешь, писал я его с применением JSONP) там табличка (большая) формируется
насколько большая, каким методом формируется, каким методом и как долго рисуется? (таблицы - это у меня типо пунктика, чего-то я в них нашла притягательное, так што давай рассказывай :-) )
...
Рейтинг: 0 / 0
25.10.2008, 11:24
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616095
Фотография Frenzy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Frenzy
Участник
мм а я юзаю jQuery и ряды добавляю примерно так...

Код: plaintext
$('table#myTable tbody').append($('<tr><td>something</td></tr>'));

...и не парюсь

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

_______________________________________
2pro4U
...
Рейтинг: 0 / 0
25.10.2008, 18:15
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616121
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
Frenzyмм а я юзаю jQuery и ряды добавляю примерно так...

Код: plaintext
$('table#myTable tbody').append($('<tr><td>something</td></tr>'));

малаток, самый правильный способ
...
Рейтинг: 0 / 0
25.10.2008, 18:43
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616126
Piligrimes
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Piligrimes
Гость
зы,

точно, лучше способа по-моему нет
...
Рейтинг: 0 / 0
25.10.2008, 18:51
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616394
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
зы, Piligrimes,

ну это как сказать. В смысле в большинстве случаев, но не во всех. Товарищ Frenzy сказал "разве что эксплорер немного задумывается когда надо дорисовать несколько сотен рядов". У меня их было три тыщи.
...
Рейтинг: 0 / 0
26.10.2008, 06:18
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616514
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
illion
ну это как сказать. В смысле в большинстве случаев, но не во всех. Товарищ Frenzy сказал "разве что эксплорер немного задумывается когда надо дорисовать несколько сотен рядов". У меня их было три тыщи.
так а в чем противоречие? ты говоришь что innerhtml рулит. Да рулит но только через него строки ты не допишешь. Или ты делала tbody.innerHTML += '<tr>..</tr><tr>...</tr>' ? :) ну а данный вариант тоже создает ноды из текста, единственное что добавляет их потом к таблице через DOM. Кстати если надо добавить ну просто дофига строк, то лучше детачнуть таблицу, добавить строки, и засунуть в документ обратно.
...
Рейтинг: 0 / 0
26.10.2008, 12:27
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616595
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
зы
так а в чем противоречие?

да ни в чем :-). Это я все о своем, о наболевшем. Речь в данном случае шла об отрисовке таблицы целиком.

зы
Кстати если надо добавить ну просто дофига строк, то лучше детачнуть таблицу, добавить строки, и засунуть в документ обратно.
если мне надо будет добавить в таблицу ну просто дофига строк, то я ни за что сейчас не буду добавлять их всех скопом! Ибо тормоза в браузере появляются не только из-за appendChild, но и в связи с рендерингом страницы, так что по-моему детачнуть и потом обратно вставить - будет то же самое подвисание (эээ... не проверяла конечно, может завтра на работе осилю). В моем последнем опыте по добавлению тыщи строк я их вставляла пачками по 10 штук через appendChild (да, вернулась все-таки от innerhtml к нему в итоге), вызывая вставку последующей пачки через setTimeout через 1мс. Такого разбиения вполне хватило для того, чтоб появилась возможность жать на другие кнопки, смотреть и выделять текст, скроллить страницу, в общем более-менее нормально работать, а не ждать пока браузер выйдет из ступора. Способ имхо сомнительный, зато работает! На дальнейшие эксперименты пока настроя нет.
...
Рейтинг: 0 / 0
26.10.2008, 14:28
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616632
Фотография Frenzy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Frenzy
Участник
имхо такие большие таблицы - это неюзабельный интерфейс. достаточно добавить пейджер и проблема отпадает. плюс если ещё учесть что динамическое формирование таблиц чаще всего нужно, когда данные для таблицы грузятса аяксом, то в последнем потихоньку смысл пропадает, когда им по 100кбайт грузится.

у меня сейчас таблица с 200 строк на странице и то кажется слишком много (элементарно изза того что скролом мотать надо). просто данные очень специфические и тут это более-менее обоснованно

_______________________________________
2pro4U
...
Рейтинг: 0 / 0
26.10.2008, 15:19
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616642
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
такие большие таблицы - это не то чтоб "неюзабельный интерфейс", это просто глупо. К сожалению, не всегда удается доказать это заказчикам, полжизни просидевшим в обнимку с экселем и не имеющим представления о базах данных, но при этом мнящим себя крутыми перцами, которые в разъяснениях и наставлениях не нуждаются. Настаивали? Мне не жалко - получай фашист гранату! А я получай за это зарплату. Правда не могу избавиться от инстинктивного желания повязать гранату праздничной ленточкой.
...
Рейтинг: 0 / 0
26.10.2008, 15:36
| Ответить | Цитировать | Написать  
новая строчка в <table>
    #35616764
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
Как известно пути ИЕ неисповедимы накорябал пример чтобы побаловаться. Последний механизм не работает, т.к. ИЕ не позволяет засовывать в innerHTML таблицы, выдает ошибку. Так же, несмотря на то, что логика подсказывает, что детачнутые элементы не перерисовываются и следовательно обновляются быстрее (что и доказывает ФФ), в ИЕ все с точностью наоборот с коэффициентом 2.

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body>
<script type="text/javascript">
	var cnt =  3000 ;
	var tbody;

	function createAddRows() {
		for(var i= 0 ; i<cnt; i++) {
			var wrap = document.createElement('div');
			wrap.innerHTML = '<table><tbody><tr><td>' + i + ' dyn row</td></tr></tbody></table>';
			wrap = wrap.lastChild.lastChild.lastChild;
			tbody.appendChild(wrap);
		}
	}
	function createAddRowsDetach() {
		var tbl = document.getElementById('testTbl');
		tbl.parentNode.removeChild(tbl);
		for(var i= 0 ; i<cnt; i++) {
			var wrap = document.createElement('div');
			wrap.innerHTML = '<table><tbody><tr><td>' + i + ' dyn row</td></tr></tbody></table>';
			wrap = wrap.lastChild.lastChild.lastChild;
			tbody.appendChild(wrap);
		}
		document.getElementById('testEnv').appendChild(tbl);
	}
	function createReplaceHtml() {
		var list = [];
		for(var i= 0 ; i<cnt; i++) {
			list.push('<tr><td>' + i + ' dyn row</td></tr>');
		}
		tbody.parentNode.parentNode.innerHTML = '<table border="1"><tbody>'+list.join('')+'</tbody></table>';
	}
	function createAddHtml() {
		var list = [];
		for(var i= 0 ; i<cnt; i++) {
			list.push('<tr><td>' + i + ' dyn row</td></tr>');
		}
		var wrap = document.createElement('div');
		wrap.innerHTML = '<table border="1"><tbody>'+list.join('')+'</tbody></table>';
		tbody.innerHTML += wrap.lastChild.lastChild.innerHTML;
	}
	
	function measure(f) {
		document.getElementById('testEnv').innerHTML = '<table id="testTbl" border="1"><tbody><tr><td> 1  row</td></tr></tbody></table>';
		tbody = document.getElementsByTagName('TBODY')[ 0 ];
		var start = new Date();
		f();
		var end = new Date();	
		res.innerHTML = 'time taken: ' + (end-start)/ 1000 . 0  + ' sec';
	}
</script>
<button onclick="measure(createAddRows);">create with appendChild</button>
<button onclick="measure(createAddRowsDetach);">create with appendChild detach</button>
<button onclick="measure(createReplaceHtml);">create by replacing innerHTML</button>
<button onclick="measure(createAddHtml);">create by adding innerHTML</button>
<br>
<div id="res"></div>
<br>
<div id="testEnv"></div>
</body>
</html>
...
Рейтинг: 0 / 0
26.10.2008, 17:58
| Ответить | Цитировать | Написать  
21 сообщений из 21, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / новая строчка в <table>
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35594380&tid=1455678]:
 0ms
get settings:
 12ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 176ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 57ms
get tp. blocked users:
 1ms
others: 234ms
total:  512ms
созд. / загр.: 512ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]