Сталкнулся с необходимостью в браузере пользователя динамически видоизменять таблицы
Следующий код добавляет в таблицу новую стороку, в строку ячейку, а в ячейку текст.
var table = document.getElementById('filelist');
var xtr = table.appendChild(document.createElement('tr'));
var xtd = xtr.appendChild(document.createElement('td'));
xtd.appendChild(document.createTextNode('текст ячейки'));
Так вот этот код работает во всех доступных мне браузерах кроме... IE. Причем узлы в DOM-дереве он создает (это я определяю по количеству потомков), а вот на экране новая строка не появляется.
Вот другой пример:
table.insertBefore(table.getElementsByTagName('tr')[2], null);
он должен переместить вторую, уже существующую, строку таблицы в конец таблицы (применяется для сортировки талбицы на клиенте). Если точнее: браузер должен удалить вторую строку и довиться в конец таблицы новую такую же. IE все эти действия выполняет, но удаление строки на экране видно, а добавление новой как и в первом примере — нет.
Подскажите, может кто знает как эту проблему решать.
P.S. Причем подобные проблемы встречаются только при работе с таблицами — все остальные элементы добавляются/удаляются нормально.
Здравствуйте, taldy, Вы писали:
T>Сталкнулся с необходимостью в браузере пользователя динамически видоизменять таблицы
T>Следующий код добавляет в таблицу новую стороку, в строку ячейку, а в ячейку текст.
T>T>var table = document.getElementById('filelist');
T>var xtr = table.appendChild(document.createElement('tr'));
T>var xtd = xtr.appendChild(document.createElement('td'));
T>xtd.appendChild(document.createTextNode('текст ячейки'));
T>
T>Так вот этот код работает во всех доступных мне браузерах кроме... IE. Причем узлы в DOM-дереве он создает (это я определяю по количеству потомков), а вот на экране новая строка не появляется.
Надо немного иначе получать объект table, так должно работать:
document.getElementById('filelist').all.tags("TBODY")(0);
Здравствуйте, taldy, Вы писали:
T>Сталкнулся с необходимостью в браузере пользователя динамически видоизменять таблицы
T>Следующий код добавляет в таблицу новую стороку, в строку ячейку, а в ячейку текст.
T>T>var table = document.getElementById('filelist');
T>var xtr = table.appendChild(document.createElement('tr'));
T>var xtd = xtr.appendChild(document.createElement('td'));
T>xtd.appendChild(document.createTextNode('текст ячейки'));
T>
T>Так вот этот код работает во всех доступных мне браузерах кроме... IE. Причем узлы в DOM-дереве он создает (это я определяю по количеству потомков), а вот на экране новая строка не появляется.
T>Вот другой пример:
T>T>table.insertBefore(table.getElementsByTagName('tr')[2], null);
T>
T>он должен переместить вторую, уже существующую, строку таблицы в конец таблицы (применяется для сортировки талбицы на клиенте). Если точнее: браузер должен удалить вторую строку и довиться в конец таблицы новую такую же. IE все эти действия выполняет, но удаление строки на экране видно, а добавление новой как и в первом примере — нет.
T>Подскажите, может кто знает как эту проблему решать.
T>P.S. Причем подобные проблемы встречаются только при работе с таблицами — все остальные элементы добавляются/удаляются нормально.
В принципе тоже должно работать при
table = document.getElementById('filelist').all.tags("TBODY")(0);
Здравствуйте, taldy, Вы писали:
T>Следующий код добавляет в таблицу новую стороку, в строку ячейку, а в ячейку текст.
T>T>var table = document.getElementById('filelist');
T>var xtr = table.appendChild(document.createElement('tr'));
T>var xtd = xtr.appendChild(document.createElement('td'));
T>xtd.appendChild(document.createTextNode('текст ячейки'));
T>
T>Так вот этот код работает во всех доступных мне браузерах кроме... IE. Причем узлы в DOM-дереве он создает (это я определяю по количеству потомков), а вот на экране новая строка не появляется.
элемент TR нужно добавлять не в TABLE, а в TBODY(коих, в свою очередь, в TABLE может быть больше одной штуки):
var table = document.getElementById('filelist');
var tbody = table.getElementsByTagName('tbody')[0];
var xtr = tbody.appendChild(document.createElement('tr'));
...
T>Вот другой пример:
T>T>table.insertBefore(table.getElementsByTagName('tr')[2], null);
T>
T>он должен переместить вторую, уже существующую, строку таблицы в конец таблицы.
судя по твоему коду — не вторую, а третью. индексация массива идет с нуля. если этой третьей нет физически, или же если она и так последняя, то и перемещать нечего.
T>Если точнее: браузер должен удалить вторую строку и довиться в конец таблицы новую такую же.
ничего он не удаляет и не создает. он реально ее переместит. т.е. сначала обнулит связку с ее местоположением(отвяжет ее от DOM), после чего привяжет к новому месту в иерархии(т.е. в конец TBODY).
этот код будет работать. хоть и стандарты я не соблюдал при оформлении.
<html>
<head>
<script>
var counter=1;
function go1(count) {
var table = document.getElementById('filelist');
var tbody = table.getElementsByTagName('tbody')[0];
if (!count) count=3;
for (var i=0;i<count;i++) {
var xtr = tbody.appendChild(document.createElement('tr'));
var xtd = xtr.appendChild(document.createElement('td'));
xtd.appendChild(document.createTextNode('текст ячейки '+(counter++)));
}
document.getElementById('btn2').disabled=0;
}
function go2() {
var table = document.getElementById('filelist');
var tbody = table.getElementsByTagName('tbody')[0];
tbody.insertBefore(tbody.getElementsByTagName('tr')[0], null);
}
</script>
</head>
<body>
<button onclick="go1();">Go1</button><br>
<button id=btn2 disabled=1 onclick="go2();">Go2</button><br>
<br><br><br>
<table border=1 id="filelist"></table>
</body>
</html>
