Holden Aug 10 2009 at 13:33

innerHTML в таблицах

2 min

4.2K

JavaScript*

Comments 14

Psih Aug 10 2009 at 14:13

Можно же сделать empty, потом append :)

Holden Aug 10 2009 at 15:21

Конечно можно и так. Но тогда придётся навешивать ещё и события к каждому добавляемому объекту.

Для большей ясности немного усложнил пример. Здесь внутри ячейки кнопка, для которой назначено событие.
$('#id_tr').html('new action');

Простой пример когда требуется именно innerHTML

Нужно динамически изменить строку таблицы. Новые данные для вставки передаются аяксом, в виде готового HTML, с уже навешаными событиями с правильными параметрами. Конечно можно перадавить данные в json и потом разбирать их и делать всё через DOM с навешиванием событий и прочим.
Но не легче ли просто заменить содержимое innerHTML на то что к нам пришло? По моему легче. + универсальность. Т.к. в этом случае отпадает необходимость рисовать обработчик для встивки в DOM для каждого случая.

Holden Aug 10 2009 at 15:22

ну да — тегов не видно
$('#id_tr').html('<td><button onclick=«my_f(new_id)»>new action</button></td>');

Psih Aug 10 2009 at 16:08

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

nooze Aug 10 2009 at 14:13

Странно, а мне наоборот работа через DOM кажется более правильной и логичной. Благо jquery позволяет через селекторы найти все что нужно с любой стороны

oRb Aug 10 2009 at 14:58

Этой весной столкнулся с такой же проблемой и пробовал решать ее через DOM. Во всех браузерах кроме IE работало нормально. Вместо нового объекта я получал в ИЕ всегда false =/
Пришлось переделывать на дивы.

Holden Aug 10 2009 at 15:23

Да, дивы — это первое о чём я подумал. Но намучавшись с созданием таблицы на дивах, плюнул и вернулся к таблицам.

MikeGav Aug 16 2009 at 00:42

Интересует реализация на чистом javascript, т.к. нет желания изучать jquery

MikeGav Aug 16 2009 at 02:29

//http://msdn.microsoft.com/ru-ru/library/ms533897%28en-us,VS.85%29.aspx
var ro_tags = {COL:1, COLGROUP:1, FRAMESET:1, HEAD:1, HTML:1, STYLE:1, TABLE:1, TBODY:1, TFOOT:1, THEAD:1, TITLE:1, TR:1};
element.appendChild(document.createTextNode(new Date().getTime().toString()));
var old_html = element.innerHTML;
while(element.tagName in ro_tags) element = element.parentNode;
element.innerHTML = element.innerHTML.replace(old_html, arrhtml[id]);

* This source code was highlighted with Source Code Highlighter.

aps Aug 16 2009 at 00:57

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

UFO just landed and posted this here

Wott Aug 16 2009 at 01:56

интересно, если покопаться ( то есть открыть исходник и сделать поиск ) то видно что
функция html(code) эквивалентна empty().append(code);

Но там же нашлась функция replaceWith(code) которая собственно по DOMу сама шариться и вставляет. По счастливому стечению обостоятельств именной ей я и вставляю готовые куски в таблицу.

MikeGav Aug 16 2009 at 02:36

В jquery не копался, но мне кажется, что html(code) отличается от empty().append(code) также как innerHTML отличается от appendChild. Это хорошо видно в моей реализации на чистом Javascript-е.

UFO just landed and posted this here

Show the best of all time