View Full Version : [Html e Javascript]Cambiare colore sfondo di una tabella
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.
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.
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.
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.
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);
Ciao,
Ti ringrazio.
Darò un occhiata a jQuery.
leonardo73
03-06-2010, 12:46
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
Ma così facendo la modifica la vedo istantaneamente?
Il cambio di colore intendo.
leonardo73
03-06-2010, 14:05
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.
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...
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
03-06-2010, 15:58
È 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.
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.
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
04-06-2010, 10:30
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 :)
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
04-06-2010, 15:04
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 ;)
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.