AJAX, Anything else

IE7 DOM bug del tag Table

Supponiamo che dobbiate generare una tabella a runtime con javascript, supponiamo che dobbiate fare uso del DOM html…niente di pi√π facile:

//creo i vari nodi
var obj = document.getElementById("id");
var tbl = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var tn = document.createTextNode("Io sono il campo di una tabella ma non mi vedi su IE gnè gnè");
//attacco i vari nodi
td.appendChild(tn);
tr.appendChild(td);
tbl.appendChild(tr);
obj.appendChild(tbl);

Con Firefox tutto ok, con Opera tutto ok, con Safari tutto ok, con Camino tutto ok, con Konqueror tutto ok, con Galeon tutto ok…non ho provato con la psp, ma diciamolo…con chi non funzioner√† questo script se non con LUI?

internet explorer

ecco come risolvere il problema…

Il workaround √® piuttosto semplice se ne avete tenuto conto da principio, altrimenti dovrete modificare un po’ il vostro layout.
Semplicemente Internet Explorer si rifiuta di fare il render del contenuto delle tabelle se esse non contengono il tag tbody.
Sottolineo il termine “render” in quanto i nuovi nodi vengono effettivamente attaccati alla tabella, solo che non vengono mostrati a video. E’ piuttosto curioso infatti fare un alert dell’innerHTML della tabella in questione (seguendo l’esempio qui sopra baster√† aggiungere un ‘alert(obj.innerHTML)’ alla fine) e vedere IE mentre sputa il codice corretto pur non visionandolo…-.-‘
Ben inteso, il tag tbody non √® obbligatorio secondo lo standard HTML4, tuttavia sappiamo pi√π o meno tutti che l’atteggiamento del browser microsoft √® piuttosto incline a “interpretare” gli standard secondo un’ottica tutta sua.

Ma veniamo al codice corretto:

var obj = document.getElementById("id");
var tbdy = document.createElement("tbody");
var tbl = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var tn = document.createTextNode("Questa volta sono visibile al mondo");
td.appendChild(tn);
tr.appendChild(td);
tbdy.appendChild(tr);
tbl.appendChild(tbdy);
obj.appendChild(tbl);

Buon divertimento con IE7 😀

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s