metodo write() funziona. getElementById() no!

**alemoppo** · 28-09-2010, 22.03.06

Scusate il titolo.. non sapevo proprio cosa mettere....

Vorrei popolare una tabella (tramite js) in modo dinamico: il numero di celle potrebbe cambiare, ma nel "cambiamento" non volevo che la pagina si ricaricasse.. quindi ovviamente il metodo write() di document non lo posso usare....

Per popolare elementi dinamici dopo il caricamento della pagina, io usavo il metodo getElementById(), ma oggi non mi funziona a dovere...

In pratica, questo funziona:

Codice HTML:

<html>
<head>
<title>poi</title>
</head>
<body>
<script type="text/javascript">
document.write('<table>');
for(i=0;i<10;i++)
{
    document.write('<tr>');
    for(k=0;k<10;k++)
        document.write('<td>'+(k+1)+'</td>');
    document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>

e questo no:

Codice HTML:

<html>
<head>
<title>poi</title>
</head>
<body>
<div id='tabella'></div>
<script type="text/javascript">
document.getElementById('tabella').innerHTML = '';
document.getElementById('tabella').innerHTML += '<table>';
for(i=0;i<10;i++)
{
	document.getElementById('tabella').innerHTML += '<tr>';
	for(k=0;k<10;k++)
		document.getElementById('tabella').innerHTML += '<td>'+(k+1)+'</td>';
	document.getElementById('tabella').innerHTML += '</tr>';
}
document.getElementById('tabella').innerHTML += '</table>';
</script>
</body>
</html>

Perché? Ho soltanto sostituito i document.write() con i document.getElementByID()!

Ammetto di non aver più scritto una pagina da mesi, ma questo mi sembrava facile.. invece non funziona

..Con firebug, il contenuto della della tabella del secondo sorgente sembra fuori dai tag <table> e </table>... perché?

Grazie a chiunque mi possa aiutare...

Ciao!

**javascripter** · 28-09-2010, 22.08.06

Il testo resta fuori da <table> perchè innerHTML corregge:

Codice:

document.getElementById('tabella').innerHTML += '<table>';

Vede che il tag è aperto e lo chiude.
Perchè non usi direttamente la tabella invece del div?

**alemoppo** · 28-09-2010, 22.10.54

ah.. dici che durante l'inserimento di <table>, poi si accorge che non è chiuso e lo chiude in automatico?

mhhh cattiva notizia!....

Non uso direttamente la tabella perché, come ho detto prima, vorrei fare una cosa "dinamica": il numero dei <td> e <tr> potrebbero cambiare e non vorrei far ricaricare la pagina...

Sai per caso una soluzione alternativa?

Grazie,

Ciao!

EDIT:

e se allora preparo prima la stringa con tutto il contenuto e poi la scrivo una sola volta??

Provo e faccio sapere

EDIT1:

wow: funziona!

Ecco come ho risolto:

Codice HTML:

<html>
<head>
<title>poi</title>
</head>
<body>
<div id='tabella'></div>
<script type="text/javascript">
var stringa = '';
stringa += '<table>';
for(i=0;i<10;i++)
{
    stringa += '<tr>';
    for(k=0;k<10;k++)
        stringa += '<td>'+(k+1)+'</td>';
    stringa += '</tr>';
}
stringa += '</table>';
document.getElementById('tabella').innerHTML = stringa;
</script>
</body>
</html>

Grazie 1000!.. non ci sarei mai arrivato a capire il problema!

Ciao!

**javascripter** · 28-09-2010, 22.15.11

Originalmente inviato da alemoppo

Non uso direttamente la tabella perché, come ho detto prima, vorrei fare una cosa "dinamica": il numero dei <td> e <tr> potrebbero cambiare e non vorrei far ricaricare la pagina...

In che senso? Cioè una volta che cambi il contenuto con innerHTML non dovresti avere problemi.

Comunque la soluzione c'è, ti crei la tabella con document.createElement:

Codice:

var elem = document.getElementById('tabella'), table = document.createElement('table');

for(i=0;i<10;i++)
{
	table.innerHTML += '<tr>';
	for(k=0;k<10;k++)
		table.innerHTML += '<td>'+(k+1)+'</td>';
	table += '</tr>';
}

elem.appendChild(table);

-
Ho appena letto il tuo edit e anche quella è una soluzione valida.

**alemoppo** · 28-09-2010, 22.18.23

Ho editato sopra.. Comunque hai ragione, ma ormai faccio come ho scritto sopra... che poi alla fine più o meno è la stessa tua cosa :-D (io uso una stringa e tu usi proprio un elemento table...

Grazie,

Ciao!

**karl94** · 28-09-2010, 22.28.34

Ti sconsiglio fortemente di usare la proprietà innerHTML, non è standard ed è molto più semplice modificare il documento usando il DOM. In particolare, per le tabelle esistono metodi e proprietà particolari, che semplificano la modifica dinamica dell'elemento. Dovresti leggerti le specifiche del W3C al riguardo per chiarirti le idee: DOM2-core e DOM2-HTML. Il primo documento definisce un'API per accedere e modificare un documento (xml o html), il secondo introduce API specifiche per i documenti HTML.

Discussione: metodo write() funziona. getElementById() no!

LinkBack

Strumenti discussione

Display

metodo write() funziona. getElementById() no!

Regole di scrittura