[Javascript] Tabella dinamica

dany84 · 17-03-2009, 14:49

Ciao a tutti,
sto cercando di creare una tabella dinamicamente con Javascript.
La tabella deve venire creata quando si clicca su un bottone presente nella pagina.
Su Firefox funziona alla perfezione, su IE non si vede nulla, non dà neanche qualche errore javascript, ci si clicca sopra e non fa assolutamente nulla.
Vagando per la rete ho trovato vari esempi, tra cui uno che faceva al caso mio e su IE funziona. Questo esempio fa però eseguire la funzione javascript sull'onLoad del <body>. Modificandolo e facendo eseguire la funzione sull'onClick di un bottone, non funziona più.
Quindi chiedo a voi, com'è possibile che la stessa funzione javascript funzioni sull'onLoad e non sull'onClick?
Tutto questo solo su IE.

Vi posto il codice dell'esempio che ho trovato in rete e che ho modificato, che è meno incasinato del mio originale:

Codice:

<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
    function start() {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        // creates a <table> element and a <tbody> element
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // creating all cells
        for (var j = 0; j < 2; j++) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 2; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createElement("input");
                cellText.setAttribute("type","button");
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }
</script>
</head>
<body>
<p>
<form name="myForm">
<input type="button" value="func" onclick="start()">
</form>
</p>
</body>
</html>

gugoXX · 17-03-2009, 17:40

Quote:

Originariamente inviato da dany84

Quindi chiedo a voi, com'è possibile che la stessa funzione javascript funzioni sull'onLoad e non sull'onClick?
Tutto questo solo su IE.

Quindi la funzione in se funziona.

Prova a sostituire con
... onclick="javascript:start()" >

dany84 · 17-03-2009, 17:49

già provato con tutte le sintassi possibili:

Codice:

onclick="start()"
onclick="start();"
onclick="javascript:start()"
onclick="javascript:start();"

aggiungo che ho provato anche a specificare il language nel tag <script>, ma non è servito a nulla.

Altre idee?

gugoXX · 17-03-2009, 18:14

Prova prima con alert("hello world") invece che tutta la tabellata
Prova anche scrivendo alert("hello Pippo") direttamente nella onclick

dany84 · 17-03-2009, 21:03

Quote:

Originariamente inviato da gugoXX

Prova prima con alert("hello world") invece che tutta la tabellata
Prova anche scrivendo alert("hello Pippo") direttamente nella onclick

ok, facendo questa prova sono riuscita a trovare l'errore in quello script e ora funziona anche con IE.
Nonostante questo, la mia funzione non va, a questo punto penso che ci sia qualche errore mio.
Facendo la prova dell'alert funziona.
Ho provato anche a togliere un pezzo alla volta, ma nulla, non fa assolutamente nulla, non riesco ad isolare l'errore.
Posto il codice:

Codice:

<html>
  <head>
    <title>MODIFICA/INSERIMENTO ARTICOLO</title>
      <script language="javascript">
	 var num = 1;
	 function createNewField() {
	   var tableEl = document.getElementById("tableForm");
	   var trEl1 = document.createElement("tr");
	   trEl1.setAttribute("id","rowImg" + num);
	   var tdEl1 = document.createElement("td");
	   var td1Text = document.createTextNode("Immagine " + num);
	   tdEl1.appendChild(td1Text);
	   trEl1.appendChild(tdEl1);
	   tableEl.appendChild(trEl1);
           num++;
	}
    </script>
  </head>
  <body>
   <table width="550" id="tableForm">
     <tr id="img">
	<td colspan="3" align="left"></td>
	<td id="tdBut0" width="200"><input type="button" value="AGGIUNGI IMMAGINE" onclick="createNewField()"></td>
     </tr>
   </table>
  </body>
</html>

L'ho controllato e ricontrollato, ma c'è per forza qualcosa che mi sfugge, magari non ho rispettato bene la struttura del DOM (eppure l'ho esaminato per bene!) e chiedo lumi a voi.

gugoXX · 17-03-2009, 21:24

Prova a circondare il corpo della funzione con
try{
...
} catch(e){
alert(e);
}

Poi ti consiglierei di installare Firebug su firefox, per poter fare il debug passo-passo del codice javascript, dove puoi anche mettere i breakpoint.
Alternativamente si puo' fare il debug anche sotto visual studio, usando internet explorer.

Torav · 17-03-2009, 21:40

non se se è questo il problema, ma se non sbaglio lo standard dice che devi attaccare i tr al tbody, non direttamente alla table.

dany84 · 17-03-2009, 21:42

Quote:

Originariamente inviato da gugoXX

Prova a circondare il corpo della funzione con
try{
...
} catch(e){
alert(e);
}

Poi ti consiglierei di installare Firebug su firefox, per poter fare il debug passo-passo del codice javascript, dove puoi anche mettere i breakpoint.
Alternativamente si puo' fare il debug anche sotto visual studio, usando internet explorer.

Appena provato, non mi catcha nessun errore.
Su Firefox funziona d'altra parte, se ci fosse un errore me lo darebbe il browser, FF o IE che sia... o no?
Firebug è già installato e non mi dà nessun errore javascript.
Per mettere i breakpoint come faccio?

Quote:

Originariamente inviato da Torav

non se se è questo il problema, ma se non sbaglio lo standard dice che devi attaccare i tr al tbody, non direttamente alla table.

uhm...provo subito

dany84 · 17-03-2009, 21:47

Quote:

Originariamente inviato da Torav

non se se è questo il problema, ma se non sbaglio lo standard dice che devi attaccare i tr al tbody, non direttamente alla table.

Era quello

Grazie infinite

@gugoXX: puoi comunque dirmi come si mettono i breakpoint in firebug? Potrebbe essermi molto utile in futuro

gugoXX · 17-03-2009, 21:52

Quote:

Originariamente inviato da dany84

Era quello

Grazie infinite

@gugoXX: puoi comunque dirmi come si mettono i breakpoint in firebug? Potrebbe essermi molto utile in futuro

Domani al lavoro chiedo ad uno sviluppatore, ora qui a casa FireBug non ce l'ho...
comunque il concetto era
1. Carico la pagina
2. Seleziono in una qualche drop-down il file (per te forse l'unico) su cui piazzare il breakpoint
3. Cliccare con il sinistro di fianco alla riga che su cui si vuole piazzare il breakpoint
4. ricaricare la pagina.

Ah, comunque per il futuro l'oggetto table (da te preso con la var tableEl = document.getElementById("tableForm") )
espone anche direttamente i metodi insertRow, insertCell, etc.
Cerca su w3school le sintassi dei vari oggetti del DOM.

dany84 · 17-03-2009, 21:58

Quote:

Originariamente inviato da gugoXX

Domani al lavoro chiedo ad uno sviluppatore, ora qui a casa FireBug non ce l'ho...
comunque il concetto era
1. Carico la pagina
2. Seleziono in una qualche drop-down il file (per te forse l'unico) su cui piazzare il breakpoint
3. Cliccare con il sinistro di fianco alla riga che su cui si vuole piazzare il breakpoint
4. ricaricare la pagina.

Ah, comunque per il futuro l'oggetto table (da te preso con la var tableEl = document.getElementById("tableForm")

espone anche direttamente i metodi insertRow, insertCell, etc.
Cerca su w3school le sintassi dei vari oggetti del DOM.

Grazie mille

Guarderò anche gli altri metodi sul sito che mi hai detto, non ne conoscevo l'esistenza, saranno almeno 4 o 5 anni che non uso Javascript per fare cose del genere

Torav · 17-03-2009, 22:05

Quote:

Originariamente inviato da dany84

Era quello

Grazie infinite

@gugoXX: puoi comunque dirmi come si mettono i breakpoint in firebug? Potrebbe essermi molto utile in futuro

figurati! mi pare che c'ero cascato pure io qualche tempo fa e ci avevo perso parecchio tempo sopra.. a ripensarci la trovo una cosa esilarante: explorer (almeno fino al 7, con l'8 va un po' meglio) probabilmente è il browser che rispetta meno gli standard, ma quelle poche volte che lo fa è proprio inflessibile ghghgh

17-03-2009, 17:49	#3
dany84 Member Iscritto dal: Aug 2005 Messaggi: 306	già provato con tutte le sintassi possibili: Codice: onclick="start()" onclick="start();" onclick="javascript:start()" onclick="javascript:start();" aggiungo che ho provato anche a specificare il language nel tag <script>, ma non è servito a nulla. Altre idee? __________________ ... I believe in miracles / I believe in a better world / for me and you ... ...Music is like sunrise for me / it's joyful like a trip in a time machine... ...Sei solo corri, corri, corri, corri / Non ti voltare mai...

17-03-2009, 18:14	#4
gugoXX Senior Member Iscritto dal: May 2004 Città: Londra (Torino) Messaggi: 3692	Prova prima con alert("hello world") invece che tutta la tabellata Prova anche scrivendo alert("hello Pippo") direttamente nella onclick __________________ Se pensi che il tuo codice sia troppo complesso da capire senza commenti, e' segno che molto probabilmente il tuo codice e' semplicemente mal scritto. E se pensi di avere bisogno di un nuovo commento, significa che ti manca almeno un test.

17-03-2009, 21:24	#6
gugoXX Senior Member Iscritto dal: May 2004 Città: Londra (Torino) Messaggi: 3692	Prova a circondare il corpo della funzione con try{ ... } catch(e){ alert(e); } Poi ti consiglierei di installare Firebug su firefox, per poter fare il debug passo-passo del codice javascript, dove puoi anche mettere i breakpoint. Alternativamente si puo' fare il debug anche sotto visual studio, usando internet explorer. __________________ Se pensi che il tuo codice sia troppo complesso da capire senza commenti, e' segno che molto probabilmente il tuo codice e' semplicemente mal scritto. E se pensi di avere bisogno di un nuovo commento, significa che ti manca almeno un test.

17-03-2009, 21:40	#7
Torav Senior Member Iscritto dal: Dec 2005 Messaggi: 558	non se se è questo il problema, ma se non sbaglio lo standard dice che devi attaccare i tr al tbody, non direttamente alla table.

Strumenti
Mostra una versione stampabile Invia questa pagina per email