Non è possibile aggiungere dinamicamente righe a una < TABLE > in IE?

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

Domanda

Ho un'applicazione AJAX che scarica un oggetto JSON e usa i dati per aggiungere righe a una tabella HTML < > utilizzando le funzioni DOM di Javascript. Funziona perfettamente ... tranne in Internet Explorer. IE non fornisce alcun tipo di errore e ho verificato il più bene possibile che il codice venga eseguito dal browser, ma semplicemente non ha alcun effetto. Ho creato questa pagina veloce e sporca per dimostrare il problema: 

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

Non ho provato IE 8, ma sia IE 7 che IE 6 non mostrano le righe aggiuntive che si suppone vengano aggiunte. Non riesco a capire perché. Qualcuno conosce una buona soluzione a questo problema o sto forse facendo qualcosa di sbagliato?

È stato utile?

Soluzione

Devi creare un elemento TBODY per aggiungere il tuo nuovo TR e quindi aggiungere il TBODY alla tua tabella, in questo modo: 

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

Altri suggerimenti

Apparentemente, in IE devi aggiungere la tua riga all'elemento TBody, non all'elemento Table ... Vedi la discussione su Forum di Ruby .

Espandendo la discussione lì, la < table > il markup viene generalmente eseguito senza esplicito < thead > e < tbody > markup, ma il < tbody > ELEMENT è dove devi effettivamente aggiungere la tua nuova riga, come < table > non contiene < tr > elementi direttamente.

Modifica: ora funziona in IE! insertSiblingNodesAfter utilizza il parentNode del fratello, che risulta essere un corpo in IE

È difficile sapere quali sono le stranezze in negozio quando si tenta di manipolare il browser incrociato DOM. Ti consiglierei di utilizzare una libreria esistente che è stata completamente testata su tutti i principali browser e tiene conto delle stranezze.

Personalmente uso MochiKit, puoi immergerti nella manipolazione del DOM qui: http://mochikit.com/doc/html/MochiKit/DOM.html

La tua funzione finale potrebbe assomigliare a questa: 

function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top