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

C

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
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.
 
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.
 
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.... :)
 
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>";
?>
 
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.
 
cavaliere123 ha scritto:
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.... :)
Clicca per allargare...

Vuoi un risultato tipo questo?

screen.jpg

Valeria.
 
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...
 
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.
 
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.
 
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 .
 
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:
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 :)
 
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
 
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 :)
 
criric ha scritto:
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>
Clicca per allargare...


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.
 
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.... :)
 
Vale2 ha scritto:
Ciao criric,

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

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
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

L
CSS, cambiare i colori della barra e ingrandire una immagine
Risposte
1
Visite
2K
WordPress
criric
criric
M
Come cambiare colori e font da una pagina esterna.
Risposte
4
Visite
2K
HTML e CSS
open-think
open-think
M
Cambiare colore al variare del testo
Risposte
6
Visite
301
PHP
Max61
M
F
Url dinamiche da cambiare con categoria, subcategoria e title
Risposte
2
Visite
968
PHP
alankanz
alankanz
D
Aiuto CSS in ELEMENTOR - Cambiare un testo
Risposte
0
Visite
1K
CMS (Content Management System)
doppiadi
D
M
Cambiare pennello a lavoro completo
Risposte
0
Visite
895
Photoshop
martaz
M
R
Cambiare il nome dell'immagine dopo caricamento ftp
Risposte
0
Visite
556
HTML e CSS
romeocharly62
R
Y
  • Bloccata
cambiare sfondo di una pagina
Risposte
1
Visite
1K
Javascript
Max 1
Max 1
E
Cambiare lingua in Elements per Mac
Risposte
2
Visite
2K
Mac e Software
enzofrog
E
R
  • Bloccata
Non riesco a cambiare l'immagine di sfondo
Risposte
4
Visite
1K
PHP
Roberto_V
R
K
Cambiare font size su echo stringa variabile
Risposte
24
Visite
3K
PHP
Kioto
K
V
[PHP Symphony] Cambiare da ApcCache ad OpCache
Risposte
4
Visite
1K
PHP
macus_adi
macus_adi
P
Cambiare visualizzazione con JS
Risposte
1
Visite
595
Javascript
Max 1
Max 1
Web93
CAMBIARE TAG POST TITOLO DA H2 A H1
Risposte
1
Visite
2K
WordPress
macus_adi
macus_adi
L
[PHP] cambiare gli if in un url semplice
Risposte
1
Visite
1K
PHP
Tommy03
Tommy03
G
Cambiare colore ad un record database mysql
Risposte
0
Visite
1K
MySQL
gchidik
G
Domenico_Falco1
Cambiare url in un sito con pagine dinamiche
Risposte
4
Visite
5K
Ajax
Domenico_Falco1
Domenico_Falco1
P
Piacere di scambiare con voi
Risposte
0
Visite
563
Presentati al Forum
paolofiorito
P
L
Cambiare classi solo scroll up
Risposte
2
Visite
2K
jQuery
lazlo
L
Topografo
Buon 2019 (Tutti gli altri hanno scritto "Salve a tutti", cerchiamo di cambiare)
Risposte
1
Visite
922
Presentati al Forum
bibliofila
B
Alto Basso