Cambiare i colori alle celle di una tabella html in modo sequenziale

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Risalve a tutti , chiedo come sempre gentilmente il vostro ausilio :)

allora ho una classica tabella

HTML:
     <table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2" id="tabellas">
  <tbody>
                      <tr> 
              <td align="center"><p id="immaga1"></p></td>
             <td align="center"><p id="immaga2"></p></td>       
             <td align="center"><p id="immaga3"></p></td>
                       </tr>
                <tr> 
       
             <td align="center"><p id="immaga4"></p></td>
             <td align="center"><p id="immaga5"></p></td>
             <td align="center"><p id="immaga6"></p></td>
               </tr>
                      <tr>

Vorrei creare uno script che colora di rosso le celle dispari e verde quelle pari per la prima riga e poi l'incontrario per la seconda riga, cioè come fosse una scacchiera, prendendo suggerimenti dalla rete ho creato questo script che vi esorto a riguardarmi :)

HTML:
             function coloracelle() { 
     
                          var l = document.getElementById("TABELLA").rows.length;
                           var t = document.getElementById("TABELLA").rows;

                          var p = document.getElementById("TABELLA").rows.cells.length;

                                var q = document.getElementById("TABELLA").rows.cells;
                              
                     for(var i = 0; i< l; i++) { if (i %2 ==1) 

                                  {  for(var j = 0; j < p; j++) { 

                                 if (j %2 ==1) { x = j ; } 
                               
                                 else { y = j ; } } }
                             
                                 else { for(var j = 0; j < p; j++) { 

                                  if (j %2 ==1) { y = j ; } 
                               
                                 else {   x = j ; } } } 

                                                                       
                         
                         document.getElementById("TABELLA").t[i].q[x].style.backgroundColor="red";
                         document.getElementById("TABELLA").t[i].q[y].style.backgroundColor="green";
                                            } }

Usando la logica ma sicuramente pessima sintassi , ho voluto prendermi tot cella di tot riga e controllando sul valore pari o dispari prima della riga e poi della cella in essa contenuta ho associato il colore...
Non assumente un sicario tutto per me, vi prego :)

Sperando in una vostra risposta vi saluto. Domenico.
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

basta un ciclo da x a x numeri conta tr, dopo dividi * 2 se il risultato è un intero è Pari se ha decimali è Dispari, dopo applichi il tutto ai tr

Valeria.
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Gentilissima Valeria ringrazio anche te per al risposta.... potrei usare i comandi :

HTML:
 var tablest = document.getElementById ("tabellas");
 var trcont = tablest.getElementsByTagName ("tr");
 var tdcont = trcont.getElementsByTagName ("td");

ma poi non so come dire allo script che deve colorare le righe in modo alternato con le celle che si colorano a mo di schacchiera.... ho provato a fare quello che ho postato.... :)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
un utente aveva postato "la curiosità uccide", ma io sono curioso lo stesso.
ma se la table è una tabella statica a che ti serve l'ambaradan del js?
HTML:
<table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2" id="tabella">
  <tbody>
                      <tr> 
              <td align="center" class="verde"><p id="immaga1"></p></td>
             <td align="center" class="rossa"><p id="immaga2"></p></td>       
             <td align="center" class="verde"><p id="immaga3"></p></td>
                       </tr>
                <tr> 
       
             <td align="center" class="rossa"><p id="immaga4"></p></td>
             <td align="center" class="verde"><p id="immaga5"></p></td>
             <td align="center" class="rossa"><p id="immaga6"></p></td>
               </tr>
                      <tr> <!-- eccetera -->
se al contrario è una table dinamica le cui celle si formano in conseguenza di un for o foreach o while io userei php
PHP:
<?php
//nel css
//.verde{background-color: #00FF00;}
//.rosso{background-color: #FF0000;}
echo "<table>";
for($k=0; $k <100;$k++){
	if($k%2==0){//$k è pari
		$class_1="verde";
		$class_2="rosso";
	}else{//$k è dispari
		$class_1="rosso";
		$class_2="verde";
	}
	echo "<tr><td class=\"$class_1\">aaaaa</td><td class=\"$class_2\">bbbb</td><td class=\"$class_1\">cccc</td></tr>";
}
echo "</table>";
?>
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Salve Borgo Italia, ti ringrazio ma non conosco il php purtroppo e quindi non saprei neanche come inserirlo sinceramente e poi dovendo mettere tutti questi script che creo in un blog che legge solo html/javascript non mi è possibile usarlo....

Poi la tabella io la creo man mano usando un append con uno script a parte e quindi risulta essere una tabella dinamica... per questo sto cercando di usare quel tipo di script che mi sono inventato...

La mia difficoltà è proprio la sintassi, infatti non riesco a dire allo script di identificare magari la prima cella della prima riga , poi la seconda cella e cosi via.... se per cortesia vi guardate lo script da me postato forse riuscirò ad essere più chiaro... perdonatemi per gli errori. :(
Un saluto. Domenico.
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Gentilissima Valeria ringrazio anche te per al risposta.... potrei usare i comandi :

HTML:
 var tablest = document.getElementById ("tabellas");
 var trcont = tablest.getElementsByTagName ("tr");
 var tdcont = trcont.getElementsByTagName ("td");

ma poi non so come dire allo script che deve colorare le righe in modo alternato con le celle che si colorano a mo di schacchiera.... ho provato a fare quello che ho postato.... :)

Vuoi un risultato tipo questo?

screen.jpg

Valeria.
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Valeria a scacchiera, ad esempio nella prima riga la prima cella rossa, la seconda verde, la terza rossa e cosi via... nella seconda riga la prima cella invece verde e la seconda rossa e cosi via...
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Rispondo al fatto che vuoi una scacchiera, quindi ai td,

la formula per la divisione * intero l'ha scritta borgo.


Segui quell'esempio e applicalo.


Poi vediamo.

Valeria.
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Gentile Valeria io purtroppo già ho creato la tabella che è enorme , non mi sono proprio azzardato a postarla è costituita da 7 layout diversi ed ognuno di loro contiene 20 immagini quindi 20 <td> .

Lo script fatto da Borgo Italia è in effetti quello di partenza da cui sono partito anche io nella mia ricerca in rete ma presuppone che debba inserire in ogni <td> adesso una class e per me sarebbe un lavoro enorme, quindi ho pensato ad uno script che prima mi vede se la riga è pari o dispari e poi le celle inserite se sono anchss'esse pari o dispari, se tu per cortesia osservi il primo script da me inserito vedrai che il calcolo già l'ho inserito è solo che non riesco a dire allo script applica questa tale cella di tale riga....
Non so se riesco ad essere chiaro.
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Io sono sicuro che ho errato nello scrivere : var p = document.getElementById("tabellas").rows.cells.length;

per indicare una cella in una riga.... e chiaramente stesso errore nel :

document.getElementById("tabellas").t.q[x].style.backgroundColor="red";
document.getElementById("tabellas").t.q[y].style.backgroundColor="green";

per dire colora la cella x della riga i .
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Intanto vi posto come lo farei +o- io
HTML:
<style>
    #tabellas td {
        padding:5px;
    }
</style>
<table id="tabellas">
    <tbody>
        <tr> 
            <td align="center"><p id="immaga1">&nbsp;</p></td>
            <td align="center"><p id="immaga2">&nbsp;</p></td>       
            <td align="center"><p id="immaga3">&nbsp;</p></td>
        </tr>
        <tr> 

            <td align="center"><p id="immaga4">&nbsp;</p></td>
            <td align="center"><p id="immaga5">&nbsp;</p></td>
            <td align="center"><p id="immaga6">&nbsp;</p></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">

    var tabella = document.getElementById('tabellas');
    var td = tabella.getElementsByTagName('td');
    var count_td = td.length;
    
    for(var i = 0; i < count_td; i++) {
        if(i%2==0) {
            td[i].style.backgroundColor = "red";
        }else{
            td[i].style.backgroundColor = "blue";
        }
    }
</script>
 
Ultima modifica:

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Grazie criric, funziona alla perfezione, e te ne ringrazio ma una curiosità davvero, in questo link :

https://www.mrw.it/javascript/articoli/dom-tabelle-agire-aspetto-tabelle-dhtml_606_3.html

c'è il passaggio :

Vediamo la funzione di esempio per richiamare il contenuto dell'intera prima riga della tabella e solo della prima cella:
HTML:
function Contenuto()
{
    alert(document.getElementById("TABELLA").rows[0].innerHTML);
    alert(document.getElementById("TABELLA").cells[0].innerHTML);
}

ma se volessi indicare diciamo la quarta cella della terza riga come dovrei scrivere in questo esempio ?
Grazie di cuore :)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
cosi
Codice:
function Contenuto()
{
    alert(document.getElementById("TABELLA").rows[2].innerHTML);
    alert(document.getElementById("TABELLA").cells[3].innerHTML);
}

ho fatto una piccola modifica al codice di prima
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Perdona io intendo nello stesso elemento... del tipo :

HTML:
 document.getElementById("TABELLA").rows[2].cells[3].innerHTML;

coè richiamare in un solo comando la tot cella di tot riga...

intanto mi aggiorno anche io la tua modifica :)
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Intanto vi posto come lo farei +o- io
HTML:
<style>
    #tabellas td {
        padding:5px;
    }
</style>
<table id="tabellas">
    <tbody>
        <tr> 
            <td align="center"><p id="immaga1">&nbsp;</p></td>
            <td align="center"><p id="immaga2">&nbsp;</p></td>       
            <td align="center"><p id="immaga3">&nbsp;</p></td>
        </tr>
        <tr> 

            <td align="center"><p id="immaga4">&nbsp;</p></td>
            <td align="center"><p id="immaga5">&nbsp;</p></td>
            <td align="center"><p id="immaga6">&nbsp;</p></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">

    var tabella = document.getElementById('tabellas');
    var td = tabella.getElementsByTagName('td');
    var count_td = td.length;
    
    for(var i = 0; i < count_td; i++) {
        if(i%2==0) {
            td[i].style.backgroundColor = "red";
        }else{
            td[i].style.backgroundColor = "blue";
        }
    }
</script>


Ciao criric,

senza frozoli, :fonzie: molto simile al mio, io non ho dichiarato una var per la tabella solo i td.


Codice:
<script type="text/javascript">
var a = document.getElementsByTagName('TD');
var n = document.getElementsByTagName('TD').length;
for(var i = 0; i < n; i++) {
if(i%2==0) {
a[i].style.backgroundColor = "red";
}else{
a[i].style.backgroundColor = "blue";
}
}
</script>



Valeria.
 

cavaliere123

Utente Attivo
31 Lug 2012
415
0
0
Perfetto pure questo...
Grazie Valeria anche a te, ma vi supplico mi dite come si scrive il document.getElementById in un solo comando per indicare tot cella di una toto riga ???
Vi prego mi serve per una cosa.... :)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Vale2 ha scritto:
Ciao criric,

senza frozoli, molto simile al mio, io non ho dichiarato una var per la tabella solo i td.

Ciao Vale, anchio all'inizo avevo in mente di non dichiararla ma poi ho pensato che ci potevano essere piu tabelle

@Cavaliere

sto provando, ma funziona solo su IE
 
Discussioni simili
Autore Titolo Forum Risposte Data
L CSS, cambiare i colori della barra e ingrandire una immagine WordPress 1
M Come cambiare colori e font da una pagina esterna. HTML e CSS 4
M Cambiare pennello a lavoro completo Photoshop 0
Y cambiare sfondo di una pagina Javascript 1
E Cambiare lingua in Elements per Mac Mac e Software 2
R Non riesco a cambiare l'immagine di sfondo PHP 4
K Cambiare font size su echo stringa variabile PHP 24
V [PHP Symphony] Cambiare da ApcCache ad OpCache PHP 4
Web93 CAMBIARE TAG POST TITOLO DA H2 A H1 WordPress 1
L [PHP] cambiare gli if in un url semplice PHP 1
G Cambiare colore ad un record database mysql MySQL 0
Domenico_Falco1 Cambiare url in un sito con pagine dinamiche Ajax 4
L Cambiare classi solo scroll up jQuery 2
Topografo Buon 2019 (Tutti gli altri hanno scritto "Salve a tutti", cerchiamo di cambiare) Presentati al Forum 1
joomeph Cambiare Nome Utente Supporto Mr.Webmaster 3
M [Visual Basic] Cambiare lo stato in checked delle checkbox richiamando dati dal database Visual Basic 6
Koboshi Cambiare il css di una pagina con tasto "on off" HTML e CSS 5
Licantropo [MySQL] Cambiare le date MySQL 4
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
L Cambiare nome pagina facebook Annunci servizi di Social Media Marketing 4
P [HTML] Wordpress - cambiare font di un tema WordPress 1
L APPARECCHIO VOIP DA CAMBIARE Adsl e Connettività 0
T cambiare formato in uscita timestamp Database 0
O Allo scroll cambiare colore di sfondo jQuery 0
crealatualista [Javascript] Cambiare record tabella... Javascript 4
napuleone [Javascript] cambiare i parametri di stampa con js Javascript 2
DaveCricket [WordPress] [PHP] Cambiare il colore del link di una pagina attiva WordPress 3
V javascript - cambiare immagine di sfondo di un div Javascript 3
D [Javascript] Script che consenta di cambiare un'immagine in base all'ora del giorno della settimana Javascript 11
B CAMBIARE PAGINA INIZIALE PHPMYADMIN MySQL 2
webmachine [WORDPRESS] Cambiare titolo pagina articoli WordPress 0
webmachine [WOOCOMMERCE][WORDPRESS] Cambiare testo pulsante Acquista E-Commerce 0
webmachine [PRESTASHOP] Cambiare ordine prezzo-sconto-prezzoscontato E-Commerce 1
B CAMBIARE TEMPLATES PHPMYADMIN MySQL 0
otto9due Dreamweaver CC 2017 - cambiare colorazione codice Windows e Software 5
webmachine [JQUERY] Cambiare immagine al click, toggle jQuery 1
A Cambiare Risposta onclick con Switch. Javascript 1
V Cambiare colore ad un button HTML e CSS 3
E Cambiare l'option di un select con jquery jQuery 1
ecosito CSS: è possibile cambiare font con uno non di uso comune? HTML e CSS 11
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Shyson Cambiare color all'onclick Javascript 9
elettroweb come cambiare testo Flash 0
M Cambiare dinamicamente il contenuto di un DIV Javascript 4
M Cambiare valore ad un campo in base alla selezione fatta nel menu a tendina PHP 16
R Cambiare la variabile in modo permanente PHP 3
P Cambiare il valore di un campo tabella con un pulsante cliccabile PHP 2
B cambiare sfondo alle celle della tabella Javascript 1
Lucia Fiore cambiare variabili <a in <a href='indirizzo'> HTML e CSS 1
A Cambiare il font-size della sidebar WordPress 2

Discussioni simili