Не удается динамически добавлять строки в <TABLE> в IE?

У меня есть приложение AJAX, которое загружает объект JSON и использует данные для добавления строк в HTML <table> используя функции DOM Javascript. Он отлично работает... кроме 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 не показывают дополнительные строки, которые предположительно добавляются. Я не могу понять, почему. Кто-нибудь знает хорошие способы решения этой проблемы, или я, возможно, что-то не так?

Ответы

Ответ 1

Вам нужно создать элемент 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>

Ответ 2

По-видимому, в IE вам нужно добавить свою строку в элемент TBody, а не элемент Table... См. Обсуждение Ruby-Forum.

Расширяясь при обсуждении там, разметка <table> обычно выполняется без явной <thead> и <tbody> разметки, но ELEMENT является тем, где вам действительно нужно добавить новую строку, так как <table> не содержит элементов <tr> .

Ответ 3

Изменить: теперь работает в 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!");
}