Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как динамически изменить первую строку в таблице? 
:(
    Опции темы
Styler
Дата 3.11.2008, 15:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 61
Регистрация: 24.7.2005

Репутация: нет
Всего: 1



Есть небольшая проблема.
Существует некая таблица, создаваемая пользователем.
Выглядит она допустим так:

Код

<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> ?
Пока что придумал только такую схему:
- добавить строку с ячейками выше первой
- скопировать туда все данные с бывшей первой строки
- удалить бывшую первую строку

Нет ли подхода попроще?

PM MAIL   Вверх
ksnk
Дата 3.11.2008, 17:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Цитата

Нет ли подхода попроще?

Напрашивается поиграться с innerHTML первой строки. Заменить там все td на th...
регуляркой - примерно так
xxx.replace(/<(\/?)td(.*?)>/g,'<$1th$2>')

Добавлено через 1 минуту
Правда возможны непредсказуемые глюки для разных броузеров - нужна серьзная проверка....


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Styler
Дата 3.11.2008, 17:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 61
Регистрация: 24.7.2005

Репутация: нет
Всего: 1



А как можно определить, сколько <td> в первой строке, средствами JS ?
PM MAIL   Вверх
solenko
Дата 3.11.2008, 20:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



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



--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
IDVsbruck
Дата 4.11.2008, 02:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Цитата(Styler @  3.11.2008,  15:26 Найти цитируемый пост)
Пока что придумал только такую схему:
- добавить строку с ячейками выше первой
- скопировать туда все данные с бывшей первой строки
- удалить бывшую первую строку

Нет ли подхода попроще?

А куда еще проще? Создание сроки типа th; добавление в цикле количества ячеек с параметрами, атрибутами и стилями; заменить первую строку на созданную - итого меньше 10 строк кода. Зато работает везде, очень кошерно и грамотно с точки зрения подхода. И однозначно быстрее, чем работа с innerHTML.

Это сообщение отредактировал(а) IDVsbruck - 4.11.2008, 02:40
PM MAIL   Вверх
SelenIT
Дата 4.11.2008, 03:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Цитата(ksnk @  3.11.2008,  17:12 Найти цитируемый пост)
поиграться с innerHTML первой строки. Заменить там все td на th...

В IE (актуальных) не пройдет...

Цитата(IDVsbruck @  4.11.2008,  02:39 Найти цитируемый пост)
И однозначно быстрее, чем работа с innerHTML.

Быстрее - имхо, вряд ли...

А вообще, надо ли вставлять/грохать целую строку? Чем недостаточно чего-то вроде
Код

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);
}



--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
solenko
Дата 4.11.2008, 12:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



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


--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
IDVsbruck
Дата 4.11.2008, 13:28 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Ну, моральные аспекты - почему да зачем не обсуждалось - человек спросил не как лучше подсветить первую строку, а как заменить. Вот и меняем ... smile

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

По-прежнему считаю объектную замену строки (не каждой ячейки отдельно, а только всей строки) наиболее правильным и быстрым способом.
PM MAIL   Вверх
SelenIT
Дата 4.11.2008, 19:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Цитата(solenko @  4.11.2008,  12:33 Найти цитируемый пост)
В чем принципиальная разница td и th?

Говорят, в семантике. Если чисто для визуальных целей, то конечно - достаточно класс у TR поменять да наследование стилей применить...

IDVsbruck, спасибо за дельное замечание! Действительно, ссылку я кинул механически, чести это мне не делает. С идеологической точки зрения - согласен полностью, искать что-то в сериализованной разметке - надругательство над логикой DOM. С точки зрения "нанооптимизации"... помню, что регулярки в IE работают неприлично шустро, тогда как DOM-методы ощутимо тормозят, чуть позже попробую протестить (в Опере сразу ясно, что регулярки проиграют). В любом случае согласен, что в обычной практике юзать innerHTML + replace не стоит;).

Цитата(IDVsbruck @  4.11.2008,  13:28 Найти цитируемый пост)
считаю объектную замену строки (не каждой ячейки отдельно, а только всей строки) наиболее правильным и быстрым способом

Вот это прошу раскрыть поподробнее - лично мне преимущество не очевидно. Ведь от того, чтобы копировать содержимое старых ячеек в новые поштучно с последующим append-ом их в новую строку, по-моему, никуда не деться, зато добавляется создание еще одного элемента... дело в минимизации кол-ва replaceElement-ов или я не понимаю чего-то совсем очевидного?


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
IDVsbruck
Дата 5.11.2008, 00:04 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



С удовольствием объясню smile
Когда мы формируем объект-строку, добавляя в нее ячейки и их содержимое, мы не затрагиваем структуры документа. И перерендерим его только один раз - когда идет подмена строк.
Если же вставить строку, затем вставлять каждую ячейку отдельно, то рендеринг всей страницы будет при каждом (!!!) изменении параметра или атрибута ячейки или строки. Вот и посчитай, насколько для страницы и ДОМ-модели будет трудоемче пошагово вставлять ячейки.
PM MAIL   Вверх
solenko
Дата 5.11.2008, 08:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



Цитата(SelenIT @  4.11.2008,  18:11 Найти цитируемый пост)
Говорят, в семантике.

Семантика добавляется с помошью js на клиенте? smile 

IDVsbruck, а есть возможность каким-то образом сказать, что сейчас дерево в процессе изменения и не стоит его перерисовывать? 


--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
IDVsbruck
Дата 5.11.2008, 12:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Думаю, нет. Все-таки модель с представлением достаточно сложно увязать, а чтобы этим еще и управлять - думаю, так далеко браузеры не пойдут ...
Хотя утверждать не буду - просто наблюдения и логический вывод.
PM MAIL   Вверх
Styler
Дата 5.11.2008, 14:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 61
Регистрация: 24.7.2005

Репутация: нет
Всего: 1



Отличная дискуссия - почерпнул для себя новое из нее smile
Раз уж пошло такое обсуждение - может подскажете мне - как узнать - есть ли в таблице обьединенные ячейки - colspan и rowspan ?
PM MAIL   Вверх
solenko
Дата 5.11.2008, 15:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



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



--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
IDVsbruck
Дата 6.11.2008, 00:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



jQuery рулит
PM MAIL   Вверх
Zeroglif
Дата 6.11.2008, 11:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66



IDVsbruck, для молитв есть отдельная церковь свой топик. ;)
PM MAIL WWW   Вверх
IDVsbruck
Дата 6.11.2008, 12:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Это однозначно. Однако jQuery по-прежнему рулит ... smile
PM MAIL   Вверх
Страницы: (2) [Все] 1 2 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1099 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.