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.041
146
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 :

http://www.mrwebmaster.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