PDA

View Full Version : [Javascript] Tabella dinamica


dany84
17-03-2009, 13: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:
<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, 16:40
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, 16:49
già provato con tutte le sintassi possibili:

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? :stordita:

gugoXX
17-03-2009, 17: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, 20:03
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:

<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, 20: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, 20: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, 20:42
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?

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, 20:47
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 :doh:
Grazie infinite :D

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

gugoXX
17-03-2009, 20:52
Era quello :doh:
Grazie infinite :D

@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, 20:58
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 :stordita:

Torav
17-03-2009, 21:05
Era quello :doh:
Grazie infinite :D

@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