righe colorate in tabella

**ottoboni77** · 29-12-2016, 11:58

Salve a tutti.
ho trovato questo script per colorare le righe di una tabella, una si una no.

codice:

<script type="text/javascript">
onload=ColoraRighe;
function ColoraRighe(){
var tabelle=document.getElementsByTagName("table");
for(i=0;i<tabelle.length;i++){
    if(tabelle[i].className.indexOf("righealterne")>=0){
        trs=tabelle[i].tBodies[0].rows;
        for(j=1;j<trs.length;j+=2)
            trs[j].className="alterna";
        }
    }
}
</script>

lo script funziona alla perfezione ma se ho più tabelle all'interno della pagina non funziona.
mi spiego. nella prima tabella non voglio le righe alterne quindi creo le tabella

codice:

<table>
   <tr>
     <td>testo</td>
   </tr>
</table>

<table class="righealterne">
   <tr>
     <td>testo</td>
   </tr>
</table>

con il codice sopra (che è solo un esempio) le righe della seconda tabella non vengono colorate.
mentre se elimino la prima tabella le righe della seconda tabella vengono colorate.

ma non capisco perché faccia così.

Grazie

**KillerWorm** · 30-12-2016, 00:48

Ciao, la questione è "perché scomodare JavaScript per una cosa del genere?"

Se devi applicare una formattazione per le righe alternate di una tabella, puoi farlo direttamente col css.
Vedi nth-child(even) e nth-child(odd). Un link tra tanti

Poi nel tuo caso puoi usare, appunto, una classe.
Un semplice esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      table{
        border: 1px solid grey;
      }
      .righealterne tr:nth-child(even){
        background: silver;
      }
    </style>
  </head>
  <body>
    <table>
      <tr><th>tabella normale</th></tr>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
    </table>
    <table class="righealterne">
      <tr><th>righealterne</th></tr>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
    </table>
  </body>
</html>

**Vincent.Zeno** · 30-12-2016, 04:02

@killerworm
vista la domanda e la soluzione proposta (un po' js, un po' css) per ora il post rimane qui

Discussione: righe colorate in tabella

Strumenti discussione

Ricerca discussione

Visualizza

righe colorate in tabella

Permessi di invio