Impossible d'ajouter de manière dynamique des lignes à un < TABLE > dans IE?

StackOverflow https://stackoverflow.com/questions/812693

Question

J'ai une application AJAX qui télécharge un objet JSON et utilise les données pour ajouter des lignes à un tableau HTML < > utilisant les fonctions Javascript de DOM. Cela fonctionne parfaitement ... sauf dans Internet Explorer. Internet Explorer ne donne aucune erreur, et j'ai vérifié du mieux que le code est en cours d'exécution par le navigateur, mais cela n'a aucun effet. J'ai créé cette page rapide et sale pour illustrer le problème: 

<!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>

Je n'ai pas essayé IE 8, mais IE 7 et IE 6 ne montrent pas les lignes supplémentaires qui sont supposées être ajoutées. Je ne peux pas comprendre pourquoi. Est-ce que quelqu'un connaît une bonne solution à ce problème, ou est-ce que je fais quelque chose de mal?

Était-ce utile?

La solution

Vous devez créer un élément TBODY auquel ajouter votre nouveau TR, puis le TBODY à votre table, comme suit: 

<!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>

Autres conseils

Apparemment, dans IE, vous devez ajouter votre ligne à l'élément TBody, pas à l'élément Table ... Voir la discussion sur le Ruby-Forum .

Pour en savoir plus sur la discussion, la < table > Le balisage est généralement effectué sans explication < thead > et < tbody > balisage, mais le < tbody > ELEMENT est l'endroit où vous devez réellement ajouter votre nouvelle ligne, sous la forme < table > ne contient pas < tr > éléments directement.

Edit: fonctionne maintenant dans IE! insertSiblingNodesAfter utilise le parentNode du frère, qui est un tbody dans IE

Il est difficile de connaître les particularités de la boutique lorsque vous essayez de manipuler le multi-navigateur DOM. Je vous recommande d'utiliser une bibliothèque existante entièrement testée sur tous les principaux navigateurs et comptes pour les bizarreries.

Personnellement, j'utilise MochiKit, vous pouvez vous plonger dans la manipulation du DOM ici: http://mochikit.com/doc/html/MochiKit/DOM.html

Votre dernière fonction pourrait ressembler à ceci: 

function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top