пятница, 15 августа 2008 г.

Как заменить ряд (tr) в таблице используя javascript без использования innerHTML в IE

В интернет браузере IE от MS существует хорошо известное ограничение на работу с таблицами - вы не можете заменить какой-либо ряд таблицы используя innerHTML. Данное ограничение известно только благодаря тому, что многие разработчики на javascript сталкивались с ним и в последствии вынуждены были менять архитектуру системы, чтобы обойти это ограничение. Не обошло это и нас.

К счастью недавно я наткнулся на пост который объясняет природу данного ограничения, и, что наибоее важно, предлагает как его обойти методами javascript!!
Пользуясь случаем :) выразим признательность автору данного поста - такие бриллианты не часто встречаются среди постов.

Ниже приводиться небольшой пример демонстрирующий данный принцип .. для того чтобы увидеть как он работает достаточно зайти на любую страницу тестового пространства от w3schools.com, вставить код приведённый ниже и запустить его)


<head>
<script type="text/javascript">
function change()
{
var temp=document.getElementById('3')
temp.innerHTML="<table><tr id='8'><td>qqq2</td><td>3qqq</td></tr></table>"

var rrr=document.getElementById('8')
var tb = document.getElementById('2');

tb.parentNode.replaceChild(rrr, tb);

}

function add()
{
var temp=document.getElementById('3')
temp.innerHTML="<table><tr id='8'><td>qqq2</td><td>3qqq</td></tr></table>"

var rrr=document.getElementById('8')
var tb = document.getElementById('2');

tb.parentNode.insertBefore(rrr, tb);
}
</script>
</head>

<body>
Choose one or another operation (cannot use both in this demo) <br /><input type="button" onclick="add()" value="Add">
<input type="button" onclick="change()" value="Change">
<table id="22" border=1>
<tr id="1"><td>2</td><td>3</td></tr>
<tr id="2"><td>2</td><td>3</td></tr>
</table>

<span id="3" style='visibility:hidden'></span>

</body>

</html>


Обратите внимание, что здесь нет необходимости знать какому элементу принадлежит ряд который будет заменён или искать какой порядковый номер имеет данный ряд - достаточно иметь ссылку на сам элемент (который будет замещён) и по нему берётся элемент которому он принадлежит tb.parentNode и он же используется в операции замены (replaceChild) вторым параметром (элемент который надо заменить).

Комментариев нет: