Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как динамически изменить первую строку в таблице?

Автор: Styler 3.11.2008, 15:26

Есть небольшая проблема. Существует некая таблица, создаваемая пользователем. Выглядит она допустим так: Код <table id="table_id" name="table_id" border="1"> <tr> <td>1</td> <td>Alex</td> <td>I am !</td> </tr> <tr> <td>2</td> <td>Ivan</td> <td>Man from other table</td> </tr>  </table> Каким образом мне средствами JS корректно изменить в первой строке этой таблицы теги на заголовочные <th> ? Пока что придумал только такую схему: - добавить строку с ячейками выше первой - скопировать туда все данные с бывшей первой строки - удалить бывшую первую строку Нет ли подхода попроще?

Автор: ksnk 3.11.2008, 17:12

Цитата Нет ли подхода попроще? Напрашивается поиграться с innerHTML первой строки. Заменить там все td на th... регуляркой - примерно так xxx.replace(/<(\/?)td(.*?)>/g,'<$1th$2>') Добавлено через 1 минуту Правда возможны непредсказуемые глюки для разных броузеров - нужна серьзная проверка....

Автор: Styler 3.11.2008, 17:34

А как можно определить, сколько <td> в первой строке, средствами JS ?

Автор: solenko 3.11.2008, 20:57

Styler, table.rows[0].cells.length http://w3schools.com/htmldom/dom_obj_table.asp

Автор: IDVsbruck 4.11.2008, 02:39

Цитата(Styler @  3.11.2008,  15:26 ) Пока что придумал только такую схему: - добавить строку с ячейками выше первой - скопировать туда все данные с бывшей первой строки - удалить бывшую первую строку Нет ли подхода попроще? А куда еще проще? Создание сроки типа th; добавление в цикле количества ячеек с параметрами, атрибутами и стилями; заменить первую строку на созданную - итого меньше 10 строк кода. Зато работает везде, очень кошерно и грамотно с точки зрения подхода. И однозначно быстрее, чем работа с innerHTML.

Автор: SelenIT 4.11.2008, 03:33

Цитата(ksnk @  3.11.2008,  17:12 ) поиграться с innerHTML первой строки. Заменить там все td на th... В IE (актуальных) не пройдет... Цитата(IDVsbruck @  4.11.2008,  02:39 ) И однозначно быстрее, чем работа с innerHTML. Быстрее - имхо, http://www.quirksmode.org/dom/innerhtml.html... А вообще, надо ли вставлять/грохать целую строку? Чем недостаточно чего-то вроде Код var tr = document.getElementById(tableId).getElementsByTagName('tr')[0], td; while (td = tr.getElementsByTagName('td')[0]) {     var th = document.createElement('th');     th.innerHTML = td.innerHTML;     tr.replaceChild(th,td); }

Автор: solenko 4.11.2008, 12:33

А зечем вообще что-то менять в дереве? В чем принципиальная разница td и th? Только в отображении? Тогда почему просто не добавить класс к нужным td

Автор: IDVsbruck 4.11.2008, 13:28

Ну, моральные аспекты - почему да зачем не обсуждалось - человек спросил не как лучше подсветить первую строку, а как заменить. Вот и меняем ...  SelenIT, надо аккуратнее с ссылками, потому что сам же не очень красиво смотришься ... да, циферки симпатичные, знаю и видел. Однако посмотрел, к чему это относится? - "generating large amounts of content". А тут мы о чем говорим? - О том, чтобы взять контент из innerHTML и парсить в поисках определенных тегов, потом менять, а потом уже вставлять, причем потом будет заново вставляться вся таблица. Данная ссылка относится только к последнему пункту - тут нет спора, innerHTML будет быстрее, но вот прокол в том, что ДОМом мы не вставляем "large amounts of content", а только заменяем первую строку. Кстати, мало что в javascript работает так медленно, как парсинг ... По-прежнему считаю объектную замену строки (не каждой ячейки отдельно, а только всей строки) наиболее правильным и быстрым способом.

Автор: SelenIT 4.11.2008, 19:11

Цитата(solenko @  4.11.2008,  12:33 ) В чем принципиальная разница td и th? http://www.w3.org/TR/html401/struct/tables.html#edef-TH, в семантике. Если чисто для визуальных целей, то конечно - достаточно класс у TR поменять да наследование стилей применить... IDVsbruck, спасибо за дельное замечание! Действительно, ссылку я кинул механически, чести это мне не делает. С идеологической точки зрения - согласен полностью, искать что-то в сериализованной разметке - надругательство над логикой DOM. С точки зрения "нанооптимизации"... помню, что регулярки в IE работают неприлично шустро, тогда как DOM-методы ощутимо тормозят, чуть позже попробую протестить (в Опере сразу ясно, что регулярки проиграют). В любом случае согласен, что в обычной практике юзать innerHTML + replace не стоит;). Цитата(IDVsbruck @  4.11.2008,  13:28 ) считаю объектную замену строки (не каждой ячейки отдельно, а только всей строки) наиболее правильным и быстрым способом Вот это прошу раскрыть поподробнее - лично мне преимущество не очевидно. Ведь от того, чтобы копировать содержимое старых ячеек в новые поштучно с последующим append-ом их в новую строку, по-моему, никуда не деться, зато добавляется создание еще одного элемента... дело в минимизации кол-ва replaceElement-ов или я не понимаю чего-то совсем очевидного?

Автор: IDVsbruck 5.11.2008, 00:04

С удовольствием объясню  Когда мы формируем объект-строку, добавляя в нее ячейки и их содержимое, мы не затрагиваем структуры документа. И перерендерим его только один раз - когда идет подмена строк. Если же вставить строку, затем вставлять каждую ячейку отдельно, то рендеринг всей страницы будет при каждом (!!!) изменении параметра или атрибута ячейки или строки. Вот и посчитай, насколько для страницы и ДОМ-модели будет трудоемче пошагово вставлять ячейки.

Автор: solenko 5.11.2008, 08:43

Цитата(SelenIT @  4.11.2008,  18:11 ) Говорят, в семантике. Семантика добавляется с помошью js на клиенте?   IDVsbruck, а есть возможность каким-то образом сказать, что сейчас дерево в процессе изменения и не стоит его перерисовывать?

Автор: IDVsbruck 5.11.2008, 12:56

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

Автор: Styler 5.11.2008, 14:19

Отличная дискуссия - почерпнул для себя новое из нее  Раз уж пошло такое обсуждение - может подскажете мне - как узнать - есть ли в таблице обьединенные ячейки - colspan и rowspan ?

Автор: solenko 5.11.2008, 15:34

Styler, обойти все ячейки и проверить соответсвтуюшие свойства.

Автор: IDVsbruck 6.11.2008, 00:07

jQuery рулит

Автор: Zeroglif 6.11.2008, 11:12

IDVsbruck, для молитв есть отдельная церковь свой топик. ;)

Автор: IDVsbruck 6.11.2008, 12:41

Это однозначно. Однако jQuery по-прежнему рулит ...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)