[Html e Javascript]Cambiare colore sfondo di una tabella

[pmhwp]

Ciao,
ho una tabella che si trova all'interno di un div.
Questa tabella viene aggiungta dinamicamente all'interno della pagina con javascript in questo modo:

document.GetElementsByName("nameDIV").InnerHTML="<table id=\"idtable\" name=\"nametable\"> </table>";

Come faccio a cambiare il colore di sfondo della tabella dopo averla aggiunta dinamicamente?

<div id="idDIV" name="nameDIV">
<table id="idtable" name="nametable"> 
</table>
</div>

Grazie.

[MaxArt]

Originariamente inviato da pmhwp

document.GetElementsByName("nameDIV").InnerHTML="<table id=\"idtable\" name=\"nametable\"> </table>";

Il JavaScript è case sensitive, spero che tu abbia scritto getElementsByName e innerHTML. Inoltre, getElementsByName ti restituisce una lista, per cui ci vuole [0] dopo la parentesi ).

Relativamente alla tua domanda, una volta inserita la tabella essa diviene un elemento del DOM e lo puoi trattare come tutti gli altri. In particolare, risulterà essere il primo nodo figlio del div, e dunque:

document.getElementsByName("nameDIV")[0].firstChild.style.backgroundColor = "red";

Io ci ho messo il rosso, tu mettici quel che ti pare.

Ah, dato che in generale più elementi HTML possono avere lo stesso attributo "name" mentre si suppone che ognuno abbia un unico "id", ti consiglio di usare document.getElementById, che è più veloce e restituisce un elemento unico.

[pmhwp]

Non mi funziona.
Dice che firstchild.style non è definito.
Forse il problema è che la tabella è inserita dinamicamente.

Comunque ho risolto il tutto modificando alcune cose.

Grazie.

[MaxArt]

Originariamente inviato da pmhwp

Non mi funziona.
Dice che firstchild.style non è definito.
Forse il problema è che la tabella è inserita dinamicamente.

No, non è quello il problema: è che si scrive firstChild, non firstchild.

[kk3z]

In firefox anche i nodi di testo vengono inclusi nella lista di nodi.
Perchè usi getElementsByName quando puoi usare l'id?

document.getElementById("idDIV").getElementsByTagName("table")[0].style.backgroundColor = "red";

Se usassi jquery sarebbe tutto più intuitivo:
$("#idDIV").children("table:first").css("backgroundColor", "red);

[pmhwp]

Ciao,
Ti ringrazio.
Darò un occhiata a jQuery.

[leonardo73]

in ogni caso per un migliore disaccoppiamento io personalmente andrei a cambiare (e via jquery come consigliato anche da kk3z) il foglio di stile associato e non direttamente la proprietà background-color

ciao

[pmhwp]

Ma così facendo la modifica la vedo istantaneamente?
Il cambio di colore intendo.

[leonardo73]

Originariamente inviato da pmhwp

Ma così facendo la modifica la vedo istantaneamente?
Il cambio di colore intendo.

se hai caricato il css dove è contenuta la definizione dello stile in questione, si.

[pmhwp]

Ok,grazie.

[MaxArt]

Originariamente inviato da kk3z

In firefox anche i nodi di testo vengono inclusi nella lista di nodi.

Ma non hanno un nome...

Se usassi jquery sarebbe tutto più intuitivo:
$("#idDIV").children("table:first").css("backgroundColor", "red);

È un'opinione personale, ma visto che mi pare che si trovi alle prime armi con JavaScript, io gli consiglierei di ambientarsi meglio con la programmazione "classica" di JavaScript prima di affidarsi ad una libreria vasta ed estensiva come jQuery.
Perché con jQuery non impara javascript: praticamente impara jQuery...

Poi, voglio dire, scrivi una riga in un modo, scrivi una riga con jQuery, almeno in questo caso...

[kk3z]

Originariamente inviato da MaxArt

Ma non hanno un nome...

Io non mi riferisco alla chiamata a getElementsByName() ma all'uso di firstChild, che in firefox in questo caso punta a un textnode (in explorer invece punta alla table).

jquery aiuta nella manipolazione del dom e in ajax, non è che sostituisce tutto javascript.

[leonardo73]

Originariamente inviato da MaxArt

È un'opinione personale, ma visto che mi pare che si trovi alle prime armi con JavaScript, io gli consiglierei di ambientarsi meglio con la programmazione "classica" di JavaScript prima di affidarsi ad una libreria vasta ed estensiva come jQuery.

basta che questo non significhi fare le cose peggio
personalmente credo che la cosa con cui bisogna prendere confidenza da subito sono le API.

[MaxArt]

Originariamente inviato da kk3z

Io non mi riferisco alla chiamata a getElementsByName() ma all'uso di firstChild, che in firefox in questo caso punta a un textnode (in explorer invece punta alla table).

Mah, precisazione un po' pignola, visto che il contenuto è stato definito con innerHTML, e quindi anche in Firefox firstChild punta alla tabella.

Originariamente inviato da leonardo73

basta che questo non significhi fare le cose peggio
personalmente credo che la cosa con cui bisogna prendere confidenza da subito sono le API.

Non ci fai tutto con jQuery. A mio avviso ha una filosofia abbastanza diversa dal JavaScript "puro" da farmi dire che in pratica si tratta di un altro linguaggio. E questo, invero, fa apprezzare il lavoro di John Resig, ma rimango dell'opinione che per i neofiti sia meglio impararla un po' "più in là", per meglio apprezzare (ed usare) gli strumenti che poi verranno usati.

[leonardo73]

Originariamente inviato da MaxArt

Non ci fai tutto con jQuery. A mio avviso ha una filosofia abbastanza diversa dal JavaScript "puro" da farmi dire che in pratica si tratta di un altro linguaggio. E questo, invero, fa apprezzare il lavoro di John Resig, ma rimango dell'opinione che per i neofiti sia meglio impararla un po' "più in là", per meglio apprezzare (ed usare) gli strumenti che poi verranno usati.

intendevo che se devi fare una cosa con javascript che si può fare anche con jquery, non vale la pena se la implementi peggio

per quanto riguarda la faccenda del neofita, quello che volevo dire è che a prescindere dal linguaggio, dal framework o dal prodotto, prendere confidenza da subito con le API è un vantaggio innegabile.

chiaramente si tratta di uno sforzo aggiuntivo al semplice imparare a programmare ma è uno sforzo che si ripaga con gli interessi in poco tempo; parlo per esperienza personale ... visto che ho fatto esattamente il contrario

[MaxArt]

Anche io ho fatto proprio il contrario. Ma, per quanto apprezzi il lavoro che c'è dietro a jQuery, preferisco sempre non usarlo. Mi sono creato i miei strumenti, senza fronzoli, e nella stragrande maggioranza dei casi uso quelli.

La mia è un'opinione che si riferisce in maniera peculiare a jQuery. Ci sono tante librerie che non hanno lo stesso effetto, diciamo pure che non ti "drogano" facendo di te un programmatore che non può più farne a meno come fa jQuery.
Invece, dopo che si ha un po' di esperienza, si può meglio usare e apprezzare l'utilità di quella libreria.

Per fare un esempio, prima kk3z ha consigliato di usare .children("table:first"): questa funzione va bene nel caso specifico, ma se andiamo a guardare il codice che gira si vede che fa un casino pazzesco per restituire UN elemento (il che è pure normale, visto che deve fare il parsing di "table:first").
Se si impara da subito a programmare così, non ci si accorge che dal punto di vista delle performance questo fa schifo, e può andare bene solo se si fa un numero limitato di chiamate.
Invece, usare .firstChild è veloce e immediato, e può essere usato in ogni caso.

[leonardo73]

Originariamente inviato da MaxArt

Se si impara da subito a programmare così, non ci si accorge che dal punto di vista delle performance questo fa schifo, e può andare bene solo se si fa un numero limitato di chiamate.
Invece, usare .firstChild è veloce e immediato, e può essere usato in ogni caso.

ok messa così ti do ragione, anche se non mi sono mai messo a vedere che fa jquery detto proprio sinceramente; personalmente lo uso in modo light e non ho mai avuto problemi di performance, ma di solito lo uso per i fronzoli