¿Cómo hacer que cada fila de la tabla tenga un color diferente?

Question

Estoy haciendo una tabla pero necesito que cada una de las filas sea de un color distinto, intercalandose un color con el otro, esto con la finalidad de facilitar la lectura. Ojo, solo quiero usar dos colores (gris oscuro y gris claro). Por lo cual pense que hacer un arreglo a traves de getelementsbytagname y hacer un ciclo for en el cual se verifica si el número es par o impar para poder hacer el patrón de colores. Les dejo el código acá

   var x = document.getElementsByTagName("TH");
   for(i = 0; i <= x; i++){
    if(i%2 == 1){
     x[i].style.backgroundColor = "#888888";
    }
    else{
     x[i].style.backgroundColor = "#DDDDDD";
    }
   }

   table, tr, th{
    border-style: solid;
    border-collapse: collapse;
   }

  <table>
   <tr>
    <th>Pizza Slice</th>
   </tr>
   <tr>
    <th>Hamburger</th>
   </tr>
   <tr>
    <th>Hot Dog</th>
   </tr>
   <tr>
    <th>Corn Dog</th>
   </tr>
   <tr>
    <th>Sandwish</th>
   </tr>
   <tr>
    <th>Nachos</th>
   </tr>
   <tr>
    <th>Salad</th>
   </tr>
   <tr>
    <th>Ice cream</th>
   </tr>
  </table>

¿Cuál es el error que estás teniendo? ¿Que no se te ponen los colores que requieres? — Fernando Torres, Jan 08 '20 at 19:36

Paulo Urbano Rivera · Accepted Answer · 2020-01-08T19:53:01.907

6

Tienes un pequeño error en la sintaxis de tu ciclo, ya que debes especificar el length de x; además ten en cuenta que el contador de la variable comienza en 0, por lo que tu comparación de i <= x.length te dará un error

for(i = 0; i < x.length; i++) {
   //codigo
}

Funcionando perfecto

const x = document.getElementsByTagName("TH");

for(i = 0; i < x.length; i++) {
   if(i%2 == 1) {
      x[i].style.backgroundColor = "#888888";
   }
   else {
      x[i].style.backgroundColor = "#DDDDDD";
   }
}

table, tr, th {
   border-style: solid;
   border-collapse: collapse;
}

<table>
            <tr>
                <th>PizzaSlice</th>
            </tr>
            <tr>
                <th>Hamburger</th>
            </tr>
            <tr>
                <th>Hot Dog</th>
            </tr>
            <tr>
                <th>Corn Dog</th>
            </tr>
            <tr>
                <th>Sandwish</th>
            </tr>
            <tr>
                <th>Nachos</th>
            </tr>
            <tr>
                <th>Salad</th>
            </tr>
            <tr>
                <th>Ice cream</th>
            </tr>
        </table>

Nos comentas si es lo que necesitas

edited Jan 08 '20 at 19:53

answered Jan 08 '20 at 19:35

Paulo Urbano Rivera

4,432
1
14
29

2

si ve esto uno de nuestro mod(AlvaroMontoro) te dijera que solo con css se puede hacer xD – JackNavaRow Jan 08 '20 at 19:48
1

Es que Alvaro y tú están a otro nivel, aún no llego al Olimpo pero para allá apuntamos jajajajaa... – Paulo Urbano Rivera Jan 08 '20 at 19:49
Gracias, solo me queda una duda, porque usas la palabra const en lugar de var cuando declaras x? cual es la diferencia? – Gerardo Topete Jan 08 '20 at 19:53
me base más que nada en ES6 y uso los cambios de esa versión; `var` esta un poco obsoleto y se está utilizando `const` para variables que que no son reasignables, es un tema largo así que te dejo un poco de [info](https://cybmeta.com/var-let-y-const-en-javascript) para que la revises :) – Paulo Urbano Rivera Jan 08 '20 at 19:55
al usar var generalmente se queda en el DOM te invito a [leer esta pregunta](https://es.stackoverflow.com/questions/106042/var-let-const-o-nada-en-javascript) donde uno de nuestros expertos explica con peras y manzana mejor – JackNavaRow Jan 08 '20 at 20:21
1

Aprendan CSS por favor, eviten cargar el javascript por algo así... Aquí un buen sitio para aprender: https://www.tutorialesprogramacionya.com/ – fredyfx Jan 08 '20 at 22:16

Triby · Answer 2 · 2020-01-08T19:40:37.770

2

Con Javascript, lo mejor sería hacerlo directamente con las filas:

        var x = document.getElementsByTagName("tr");
        for(i = 0; i < x.length; i++){
            if(i % 2){
                x[i].style.backgroundColor = "#888888";
            }
            else{
                x[i].style.backgroundColor = "#DDDDDD";
            }
        }

Solución solo CSS: Usa nth-child con sus reglas even (pares) y odd (nones)

table tr:nth-child(even) { background:#c0c0c0; }
table tr:nth-child(odd) { background:#808080; }

Referencia: https://www.w3.org/Style/Examples/007/evenodd.en.html

edited Jan 08 '20 at 19:40

answered Jan 08 '20 at 19:32

Triby

23,274
3
13
35

¿Y si lo quisiera hacer solo con javascript, cómo sería? – Fernando Torres Jan 08 '20 at 19:35
que tal si agregas el ejemplo completo con html/css , vamos puedes dar una respuesta de calidad, con el ejemplo del usuario – JackNavaRow Jan 08 '20 at 19:51

FRANCISCO J. BLANCO · Answer 3 · 2020-01-10T14:48:26.623

Bueno primero te dejo un ejemplo funcional, segundo cuando recorrías X no estabas recorriendo un array estabas recorriendo un objeto por eso nunca ingresaba solo agrega el length y funciono.

<html>
    <head>
        <style>
            table, tr, th{
                border-style: solid;
                border-collapse: collapse;
            }
            

        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Pizza Slice</th>
            </tr>
            <tr>
                <th>Hamburger</th>
            </tr>
            <tr>
                <th>Hot Dog</th>
            </tr>
            <tr>
                <th>Corn Dog</th>
            </tr>
            <tr>
                <th>Sandwish</th>
            </tr>
            <tr>
                <th>Nachos</th>
            </tr>
            <tr>
                <th>Salad</th>
            </tr>
            <tr>
                <th>Ice cream</th>
            </tr>
        </table>
        <script>

            var x = document.getElementsByTagName("TH");
            
             for(i = 0; i < x.length; i++){
                if(i%2 == 1){
                   x[i].style.backgroundColor = "#888888";
                }
                else{
                   x[i].style.backgroundColor = "#DDDDDD";
                }
            }
        </script>
    </body>
</html>

Edición: Ahora puede hacer solo con CSS de la siguiente forma, te dejo un ejemplo funcional:

<html>
    <head>
        <style>
            table, tr, th{
                border-style: solid;
                border-collapse: collapse;
            }
            
            table tr:nth-child(even) { background:#c0c0c0; }
            table tr:nth-child(odd) { background:#808080; }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Pizza Slice</th>
            </tr>
            <tr>
                <th>Hamburger</th>
            </tr>
            <tr>
                <th>Hot Dog</th>
            </tr>
            <tr>
                <th>Corn Dog</th>
            </tr>
            <tr>
                <th>Sandwish</th>
            </tr>
            <tr>
                <th>Nachos</th>
            </tr>
            <tr>
                <th>Salad</th>
            </tr>
            <tr>
                <th>Ice cream</th>
            </tr>
        </table>
      
    </body>
</html>

¿Cómo hacer que cada fila de la tabla tenga un color diferente?

3 Answers3