Ne peut pas ajouter dynamiquement des lignes à un <TABLE> dans IE?

J'ai une application AJAX qui télécharge un objet JSON et utilise les données pour ajouter des lignes à une balise HTML <table> à l'aide de Javascript DOM fonctions. Il fonctionne parfaitement... sauf dans Internet Explorer. IE n'est pas donner toute sorte d'erreur, et j'ai vérifié du mieux que je peux que le code est exécuté par le navigateur, mais il n'a tout simplement aucun effet. J'ai créé cette rapide et sale page 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 à la fois IE 7 et IE 6 ne pas afficher les lignes supplémentaires qui sont soi-disant en cours d'ajout. Je ne peux pas imaginer pourquoi. Quelqu'un sait-il une bonne solution à ce problème ou suis-je peut-être fait quelque chose de mal?

InformationsquelleAutor Joshua Carmody | 2009-05-01
  1. 17

    Vous avez besoin pour créer un élément TBODY pour ajouter votre nouveau TR, puis ajouter la TBODY à votre table, comme ceci:

    <!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>
    • en fait, tableElement.getElementsByType('tbody') devrait revenir ce qui est recherché ici....
    • en fait, <pre>tableElement.getElementsByType('tbody')</pre> devrait revenir ce qui est souhaité ici
    • Désolé les gars, encore un peu nouveau sur l'observation / réponse de la syntaxe des différences. De toute évidence, a voulu mettre le code de style de mise en forme sur le fragment de code.
    • Je me rends compte que c'est un vieux post, mais depuis d'autres peuvent encore l'utiliser pour la référence, le commentaire ci-dessus ne fonctionne pas pour moi. Ce qui a fonctionné pour moi a été tableElement.getElementsByTagName('tbody')[0]
    • J'ai essayé d'ajouter <tbody> dans mon démo, mais encore il ne semble pas fonctionner sur IE, mon question
    InformationsquelleAutor Wally Lawless
  2. 8

    Apparemment, c'est à dire vous devez ajouter à votre ligne de la TBody élément, et non pas l'élément de la Table...
    Voir la discussion à Ruby-Forum.

    D'élargir la discussion là-bas, le <table> le balisage se fait généralement sans explicites <thead> et <tbody> le balisage, mais la <tbody> ÉLÉMENT est l'endroit où vous avez réellement besoin d'ajouter votre nouvelle ligne, comme <table> ne contient pas de <tr> éléments directement.

    • Ajoutant à tbody fonctionne de manière cohérente dans tous les navigateurs, de sorte qu'il est sûr de le faire toujours.
    InformationsquelleAutor Tetsujin no Oni
  3. 2

    Edit: fonctionne maintenant dans IE! insertSiblingNodesAfter utilise le parentNode de la fratrie, qui se trouve être une tbody dans IE

    Il est difficile de savoir ce bizarreries sont en magasin lorsque vous essayez de manipuler le DOM de la croix-navigateur. Je vous recommande d'utiliser une bibliothèque existante qui a été entièrement testé sur tous les principaux navigateurs, et les comptes de bizarreries.

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

    Votre fonction finale devrait ressembler à quelque chose comme ceci:

    function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}
    • JQuery est une autre très bonne alternative aux roulées à la main code.
    • +1 pour l'utilisation de MochiKit (mon préféré de la bibliothèque), mais vous avez manqué la réponse réelle - il besoin d'ajouter des lignes à un TBody pour IE reconnaître les lignes.
    • Je ne savais pas que appendChildNodes n'était pas, j'avais été en utilisant insertSiblingNodes dans mon propre code, qui fonctionne - j'ai mis à jour la réponse à réfléchir à une solution de travail.
    InformationsquelleAutor EoghanM