📜 ⬆️ ⬇️

innerHTML in tables

It is known that in IE the innerHTML property for tables is a read-only property. support.microsoft.com/kb/239832

As a result, to change the contents of the table, you need to run on the DOM. That is not always convenient, especially if an event is assigned to each cell.
I was hoping that in jquery this situation is corrected. But no. Code
$('#id_tr').html('<td><button onclick="my_f(new_id)">new action</button></td>');
also does not work properly.

As a result, a simple and elegant solution was found.
')
I bring the implementation of the function to jquery, although it can be easily rewritten to “pure” 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 .


As a result, in order to change the contents of the table it is enough to execute such code.
set_html($('#id_tr'),'<td><button onclick="my_f(new_id)">new action</button></td>');

Source: https://habr.com/ru/post/66678/


All Articles