Non è possibile aggiungere in modo dinamico righe a <TABLE> in IE?

Possiedo un'applicazione AJAX che scarica un oggetto JSON e utilizza i dati per aggiungere righe a una tabella HTML > utilizzando le funzioni DOM Javascript. Funziona perfettamente ... tranne in Internet Explorer. IE non fornisce alcun tipo di errore e ho verificato nel miglior modo possibile che il codice venga eseguito dal browser, ma semplicemente non ha alcun effetto. Ho creato questa pagina rapido e sporco per illustrare il problema:Non è possibile aggiungere in modo dinamico righe a <TABLE> in 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>

non ho provato IE 8, ma entrambi IE 7 e IE 6 non mostrano le righe aggiuntive che sono presumibilmente aggiunto. Non riesco a capire perché. Qualcuno sa una buona soluzione a questo problema, o sto forse facendo qualcosa di sbagliato?

fonte

2009-05-01 Joshua Carmody

È necessario creare un elemento TBODY aggiungere la nuova TR e quindi aggiungere il TBODY al vostro tavolo, 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>

fonte

2009-05-01 19:01:24

, 'tableElement.getElementsByType ('tbody')' dovrebbe restituire ciò che si desidera qui .... –

in realtà,

tableElement.getElementsByType('tbody')

dovrebbe restituire ciò che si desidera qui –

Scusate ragazzi, ancora un po 'nuovo sulle differenze di sintassi commento/risposta. Ovviamente, volevo mettere la formattazione in stile codice sul frammento di codice. –

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

E 'difficile sapere cosa stranezze sono in serbo quando si tenta di manipolare il DOM cross-browser. Ti consigliamo di utilizzare una libreria esistente che è stata completamente testata su tutti i principali browser e tiene conto di stranezze.

Personalmente io uso MochiKit, è possibile immergersi in DOM manipolazione qui: http://mochikit.com/doc/html/MochiKit/DOM.html

La funzione finale potrebbe essere simile 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!"); 
}

fonte

2009-05-01 18:57:01 EoghanM

JQuery è un'altra ottima alternativa al codice arrotolati a mano. – GalacticCowboy

+1 per usare MochiKit (la mia libreria fave), ma hai perso la risposta effettiva - ha bisogno di aggiungere righe a un TBody per IE per riconoscere le righe. –

Non mi ero reso conto che appendChildNodes non funzionava - stavo usando insertSiblingNodes nel mio codice, il che funziona - ho aggiornato la risposta per riflettere una soluzione funzionante. – EoghanM

A quanto pare, in IE è necessario aggiungere la riga a l'elemento TBody, non l'elemento Table ... Vedere la discussione allo Ruby-Forum.

Ampliando la discussione lì, al tavolo <> markup viene generalmente fatto senza esplicito thead> e < tbody> markup <, ma il tbody <> elemento è dove è effettivamente necessario aggiungere la nuova riga, come < table> non contiene < tr> elementi direttamente.

fonte

2009-05-01 18:59:02

L'aggiunta a tbody funziona in modo coerente in tutti i browser, quindi è sicuro farlo sempre. – JPot

Non è possibile aggiungere in modo dinamico righe a <TABLE> in IE?

risposta

Problemi correlati