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

Discussione in 'Javascript' iniziata da cavaliere123, 28 Settembre 2012.

Tag (etichette):
  1. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.
     
  2. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    cominciamo male :crying:
     
  3. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Salve mio mentore :)
    Il solito sbatato... cmq ho corretto ma non va lo stesso :(
     
  4. Vale2

    Vale2 Utente Attivo

    Registrato:
    28 Maggio 2006
    Messaggi:
    446
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Ex Studente - Cerca collaborazione per Asp e Asp.N
    Località:
    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.
     
  5. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.... :)
     
  6. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    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>";
    ?>
     
  7. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.
     
  8. Vale2

    Vale2 Utente Attivo

    Registrato:
    28 Maggio 2006
    Messaggi:
    446
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Ex Studente - Cerca collaborazione per Asp e Asp.N
    Località:
    Livorno
    Vuoi un risultato tipo questo?

    screen.jpg

    Valeria.
     
  9. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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...
     
  10. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Ma è proprio sballato il mio script ??? :) :) :)
    non mi rispondete con un va al diavolo vi prego ^_*
     
  11. Vale2

    Vale2 Utente Attivo

    Registrato:
    28 Maggio 2006
    Messaggi:
    446
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Ex Studente - Cerca collaborazione per Asp e Asp.N
    Località:
    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.
     
  12. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.
     
  13. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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 .
     
  14. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    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: 28 Settembre 2012
  15. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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 :)
     
  16. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    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
     
  17. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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 :)
     
  18. Vale2

    Vale2 Utente Attivo

    Registrato:
    28 Maggio 2006
    Messaggi:
    446
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Ex Studente - Cerca collaborazione per Asp e Asp.N
    Località:
    Livorno

    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.
     
  19. cavaliere123

    cavaliere123 Utente Attivo

    Registrato:
    31 Luglio 2012
    Messaggi:
    415
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.... :)
     
  20. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    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
     
Sto caricando...

Condividi questa Pagina