[SOLUCIONADO] Colorear Filas de una tabla. par-impar

[cristo995]

Hola buen dia para todos..

tengo un pequeñito problemita.

Tengo una tabla obtenida de una consulta mysql y para adornarla un poco la e pintado con jquery y CSS : asi.

$(document).ready(function(){
$("tr:odd").css("background-color", "while"); // filas pares
$("tr:even").css("background-color", "#F2F2F2"); // filas impares
});

como resultado me da una tabla muy presentable y muy bonita ya que la filas pares estan de color blanco y las impares de color gris.

para seguir adornando mi tabla e querido que al pasar el mouse por cualquier fila ya sea par o impar , esta se ponga de color:celeste.

para ello e usado CSS asi.

tr:hover{
background-color:aqua;
cursor :pointer;
}

aqui el problema.

pasa que cuando paso el mouse por ensiama solo se me colorean las filas pares de celeste. y las impares no toman ningun efecto siguen siendo de color gris. no se a que se deve esto pienso que con el tr:hover{background:xxxx;

esta deveria tomar el efecto en cualquier fila ya sea par o impar

alguien me podria dar alguna solucion ?.

[Naahuel]

Tu problema es un resultado raro de que escribiste mal "white". Pusiste "while".

Si hubieses puesto "white", no se colorearía ninguna fila al pasar el mouse (ni pares ni impares). Dado que "while" no es un color CSS válido, no lo aplica. Pero el otro si.

Entonces, usando jQuery (que para estos propósitos está muy mal) los estilos se aplican inline. Es decir:

Código HTML:

<tr style="background-color: white;"></tr>
 

Los estilos inline tienen mayor peso que los embebidos o los importados de una hoja de estilo. Entonces, el estilo inline "gana" frente al :hover que incorporaste en otro lado.

¿La solución? No uses jQuery. Está mal (para este propósito).

Código HTML:

<style>
  tr{
    /* Todas las filas blancas */
    background-color: white;
  }
  tr:nth-child(2n+1){
    /* Filas impares grises */
    background-color: grey;
  }
  tr:hover{
    /* Filas celeste al pasar el mouse */
    background-color: aqua;
  }
</style>
 
<table width="100%">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
    </tr>
    <tr>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
    </tr>
    <tr>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
    </tr>
  </tbody>
</table>
 

En este ejemplo la primer regla (por ser una regla de tipo elemento) es la menos fuerte. Las otras dos reglas que siguen son más fuertes, pues son elemento:pseudo-clase y además vienen después. Por lo tanto, siempre gana la que está más abajo (en este caso, la hover).

[ArturoGallegos]

Siempre se puede recurrir a aplicar !important

Código CSS:

tr:hover{background:red!important;}
 

Aunque lo ideal es agregar una clase en lugar de los estilos en linea

[pzin]

Como bien dice Naahuel, estás usando JavaScript para algo que no deberías.

A modo de completar, también puedes hacer uso de par/impar como haces con jQuery pero usando CSS:

Código CSS:

tr:nth-child(odd)
  background-color: white;
}
tr:nth-child(even) {
  background-color: grey;
}
 

[cristo995]

Muchisimas gracias esto me ah servido 100% eso es lo que yo estaba buscando y lo del color while en vez de white jeje esque lo escribi mal aqui en el foro :)

Tu ayuda y Tambien la de: ArturoGallegos de usar: tr:hover{background-color:aqua!important} me funcionan 100% de nuevo muchas gracias

[cristo995]

:arriba

muchas gracias la palabra !important me va de 100%

al igual que la respuesta de Naahuel

[ryugen]

Algunas consideraciones para completar el tema. Lo siguiente no modifica todos los consejos que te dieron sino que los complementa.

El selector :nth-child no es soportado en en Internet Explorer 8 e inferior.

Es por la razón anterior por la cual no estoy utilizando las reglas :nth-child en proyectos que requieran soporte para IE en esas versiones.

En esos casos incorporo una clase a cada una de las filas, y luego utilizo esa clase para dar el estilo correspodiente.

Si la tabla se genera en lenguaje de servidor la incorporo mediante esa forma.

En cambio si la tabla es manipulada con JavaScript utilizo este último para agregar las clases correspondientes.

Saludos