Pull to refresh

innerHTML в таблицах

Reading time2 min
Views4.2K
Известно, что в IE свойство innerHTML для таблиц является свойством только для чтения. support.microsoft.com/kb/239832

В итоге для изменения содержимого таблицы, нужно бегать по DOM. Что не всегда удобно, особенно если для каждой ячейки назначено какое-то событие.
Я надеялся, что в jquery эта ситуация исправлениа. Но нет. Код
$('#id_tr').html('<td><button onclick="my_f(new_id)">new action</button></td>');
тоже не работает должным образом.

В результате было найдено простое и элегантное решение.

Привожу реализацию функции на jquery, хотя её можно без особого труда переписать и на «чистый» javascript:
function set_html(obj,new_html){
  
  function replace_html(obj,old_html,new_html){
    var obj_parent=$(obj).parents('')[0];
   var tn=$(obj_parent).attr('tagName').toLowerCase();
   if (tn == 'table' || tn == 'tbody' || tn == 'thead' || tn == 'tr' || tn == 'th' || tn == 'td') {
      replace_html(obj_parent,old_html,new_html);
    }
    else {
      var cur_html=$(obj_parent).html();
    var repl_html=cur_html.replace(old_html,new_html);
    $(obj_parent).html(repl_html);      
    }
  }
  
 var tn=$(obj).attr('tagName').toLowerCase();
 if (tn == 'table' || tn == 'tbody' || tn == 'thead' || tn == 'tr' || tn == 'th' || tn == 'td') {
    var xid = new Date().getTime().toString()
  $(obj).append(xid);
    replace_html(obj,$(obj_container).html(),new_html);
 }
 else {
  $(obj).html(new_html); 
 }  
}


* This source code was highlighted with <font size="1" color="gray">Source Code Highlighter.


В итоге для того, чтобы изменить содержимое таблицы достаточно выполнить такой код
set_html($('#id_tr'),'<td><button onclick="my_f(new_id)">new action</button></td>');
Tags:
Hubs:
+3
Comments14

Articles

Change theme settings