Не удается динамически добавить строки в тег < TABLE > в IE?
-
03-07-2019 - |
Вопрос
У меня есть приложение AJAX, которое загружает объект JSON и использует данные для добавления строк в HTML < table > используя функции Javascript DOM. Работает отлично ... кроме как в Internet Explorer. IE не дает никаких ошибок, и я как мог убедился, что код выполняется браузером, но он просто не имеет никакого эффекта. Я создал эту быструю и грязную страницу, чтобы продемонстрировать проблему:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>
<table id="employeetable">
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</table>
<script type="text/javascript">
function addEmployee(employeeName, employeeJob) {
var tableElement = document.getElementById("employeetable");
if (tableElement) {
var newRow = document.createElement("tr");
var nameCell = document.createElement("td");
var jobCell = document.createElement("td");
nameCell.appendChild(document.createTextNode(employeeName));
jobCell.appendChild(document.createTextNode(employeeJob));
newRow.appendChild(nameCell);
newRow.appendChild(jobCell);
tableElement.appendChild(newRow);
alert("code executed!");
}
}
setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>
</body></html>
Я не пробовал IE 8, но в IE 7 и IE 6 не отображаются дополнительные строки, которые предположительно добавляются. Я не могу понять, почему. Кто-нибудь знает хороший способ обойти эту проблему, или я, возможно, делаю что-то не так?
Решение
Вам нужно создать элемент TBODY, чтобы добавить в него новый TR, а затем добавить TBODY к вашей таблице, например так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>
<table id="employeetable">
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</table>
<script type="text/javascript">
function addEmployee(employeeName, employeeJob) {
var tableElement = document.getElementById("employeetable");
if (tableElement) {
var newTable = document.createElement('tbody'); // New
var newRow = document.createElement("tr");
var nameCell = document.createElement("td");
var jobCell = document.createElement("td");
nameCell.appendChild(document.createTextNode(employeeName));
jobCell.appendChild(document.createTextNode(employeeJob));
newRow.appendChild(nameCell);
newRow.appendChild(jobCell);
newTable.appendChild(newRow); // New
tableElement.appendChild(newTable); // New
alert("code executed!");
}
}
setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>
</body></html>
Другие советы
По-видимому, в IE вам нужно добавить строку к элементу TBody, а не к элементу Table ... См. Обсуждение на Ruby-Forum .
Продолжая обсуждение, перейдем к таблице < table > разметка обычно выполняется без явного < thead > и < tbody > разметка, но < tbody > ELEMENT - это то место, где вам нужно добавить новую строку, как < table > не содержит < tr > элементы напрямую.
Редактировать: теперь работает в IE! insertSiblingNodesAfter использует parentNode родного брата, который является тэтом в IE
<Ч>Трудно понять, какие причуды существуют, когда вы пытаетесь манипулировать кросс-браузером DOM. Я бы порекомендовал вам использовать существующую библиотеку, которая была полностью протестирована во всех основных браузерах, и учитывает причуды.
Лично я использую MochiKit, вы можете погрузиться в манипуляции с DOM здесь: http://mochikit.com/doc/html/MochiKit/DOM.html р>
Ваша последняя функция может выглядеть примерно так:
function addEmployee(employeeName, employeeJob) {
var trs = getElementsByTagAndClassName("tr", null, "employeetable");
insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
alert("code executed!");
}