Resaltar filas de una tabla con jQuery

Un efecto que suelo emplear en las tablas que utilizo en cualquier aplicación web es la de resaltar la fila por la que sitúo el cursor. Con jQuery podemos hacerlo de una manera muy fácil y evitando añadir javascript obtrusivo a nuestro sitio.

Partimos de la tabla:

<table id="table_customer">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Luis</td>
      <td>López</td>
    </tr>
    <tr>
      <td>Pedro</td>
      <td>Fernández</td>
    <tr>
  </tbody> (obviaremos el tfoot para el ejemplo)
</table>

y tenemos la siguiente clase CSS:

.tr_hover {background-color: #ffccee}

nos quedaría definir el comportamiento usando jQuery:

// para cada fila del body de la tabla table_customer
// defino el comporatamiento que tendrá cuando el ratón
// pase por encima
$("#table_customer tbody tr").mouseover(function() {
     // a la fila sobre la que esté el ratón (this)
     // le añado la clase que la resaltará
     $(this).addClass("tr_hover");
});

// para cada fila del body de la tabla table_customer
// defino el comporatamiento que tendrá cuando el ratón
// deje de estar encima
$("#table_customer tbody tr").mouseout(function() {
     // a la fila sobre la que esté el ratón (this)
     // le quito la clase que hace que resalte
     $(this).removeClass("tr_hover");
});

y listos, esto tendrás que implementarlo el ready() o bien en la funcion de tipo Ajax response que implementes a una llamada Ajax que genere la tabla con los datos.

Página oficial de jQuery.

Anuncios

Etiquetado:,

26 pensamientos en “Resaltar filas de una tabla con jQuery

  1. orlando mayo 4, 2010 en 10:04 pm

    Deberias explicar mejor donde y como se coloca todo estos datos
    // para cada fila del body de la tabla table_customer
    // defino el comporatamiento que tendrá cuando el ratón
    // pase por encima
    $(“#table_customer tbody tr”).mouseover(function() {
    // a la fila sobre la que esté el ratón (this)
    // le añado la clase que la resaltará
    $(this).addClass(“tr_hover”);
    });

    // para cada fila del body de la tabla table_customer
    // defino el comporatamiento que tendrá cuando el ratón
    // deje de estar encima
    $(“#table_customer tbody tr”).mouseout(function() {
    // a la fila sobre la que esté el ratón (this)
    // le quito la clase que hace que resalte
    $(this).removeClass(“tr_hover”);
    });

  2. orlando mayo 4, 2010 en 10:15 pm

    deberias explicar emjor sobre ese efecto. Si no vas a poner completo mejor no pongas nada

  3. orlando mayo 4, 2010 en 10:44 pm

    No funciona tu codigo. es una porqueria

  4. kurroman junio 4, 2010 en 9:32 am

    Esta web es para programadores seniors. Un programador senior sabe perfectamente donde colocar el código que muestro y el además funciona perfectamente.

    Saludos.

  5. melvinlopez06 julio 6, 2010 en 3:28 pm

    orlando el codigo si funciona!
    Me consta

  6. MR. CHOLE octubre 17, 2010 en 5:22 pm

    YA NI LA CHINGAS, NO SIRVE GUEY !

  7. CS junio 16, 2011 en 5:38 pm

    Muy creativo código bola de envidiosos aprendan lo básico primero

  8. no tengo agosto 19, 2011 en 7:42 pm

    No todos tienen el nivel de conocimientos que tu demuestras kurroman, por lo que te recomendaría que incluyas mas comentarios explicando el codigo que muestras asi todos pueden llegar a ser “seniors” igual que tú, que no creo que hayas nacido sabiendo. En todo caso, pueden reunirse tú y el usuario CS y darse juntos por el orto uno al otro con jQuery.

  9. v_omar octubre 12, 2011 en 9:01 pm

    Si funciona, yo lo probe con div y no tube problema

    Dejo mi codigo
    $(“.filas”).mouseover(function() {
    $(this).addClass(“fondoTable”);
    });
    $(“.filas”).mouseout(function() {
    $(this).removeClass(“fondoTable”);
    });

    +10

  10. ivan noviembre 26, 2011 en 8:41 pm

    flaco, por qué no explicas mejor como se pone el codigo, sos un salame.

  11. El Verdulero agosto 23, 2012 en 2:46 pm

    losers! si no tienen idea de javascript no anden diciendo que el código no sirve, quieren todo peladito y a la boca, wevones ponganse a leer más para que entiendan y asi sabran donde va colocado el código. Ya nada mas falta que quieran que vayan a escribirlespersonalmente el codigo en sus pc’s ¡No Mamen!

  12. Jose G. Espitia Sierra noviembre 14, 2012 en 7:33 pm

    Excelente. Gracias… solo tengo que cambiarle ese colorcito jejejej ;)….

  13. SOS noviembre 21, 2012 en 6:39 pm

    aah chiga tu madre, explicalo bien , cabron de mierda

  14. kurroman noviembre 22, 2012 en 5:26 pm

    En este blog entendemos que los usuarios tienen un nivel básico/medio de programación. Los que no encuentren útil esta información pueden buscar en otros tutoriales para principiantes. Una vez que aprendan lo básico, pueden visitarnos y realizar críticas constructivas, que serán bienvenidas. Por favor, no recurran al insulto que no me apetece borrar comentarios.

  15. ecatepecSOS noviembre 23, 2012 en 4:49 am

    Por eso pides el correo che mono

  16. lulloa noviembre 28, 2012 en 6:26 pm

    Si funciona y ahi lo explica tienen que poner el siguiente codigo en la funcion ready()
    ejemplo:

    $(document).ready(function(){

    // para cada fila del body de la tabla table_customer
    // defino el comporatamiento que tendrá cuando el ratón
    // pase por encima
    $(“#table_customer tbody tr”).mouseover(function() {
    // a la fila sobre la que esté el ratón (this)
    // le añado la clase que la resaltará
    $(this).addClass(“tr_hover”);
    });

    // para cada fila del body de la tabla table_customer
    // defino el comporatamiento que tendrá cuando el ratón
    // deje de estar encima
    $(“#table_customer tbody tr”).mouseout(function() {
    // a la fila sobre la que esté el ratón (this)
    // le quito la clase que hace que resalte
    $(this).removeClass(“tr_hover”);
    });

    });

  17. small business grants oregon diciembre 13, 2012 en 9:41 pm

    obviously like your web-site however you have to check the spelling on several of your
    posts. Several of them are rife with spelling issues and I in finding it very bothersome to inform the truth then again I will surely come again again.

  18. kurroman diciembre 14, 2012 en 12:12 am

    Rife? I don´t think so but probably there are some mistakes. Sorry about that. I suppose it may represent to you translation problems. Tell me about the exact position and i will help you with translation or correct the mistake.

  19. Petroleo febrero 22, 2013 en 6:11 pm

    Al parecer ya se dieron cuenta del error a los que no le funcionaba y solo criticaban, por eso ya no comentan… que por cierto estaba en su ADN, jajaja; a mi me funciono perfectamente, solamente coloque la parte de jquery en mi código y le cambie el id de mi tabla (table_customer) y la clase (tr_hover) por las que tengo y listo no demore ni 20 segundos muchas gracias por este truco. tienes mis 10 puntos.

  20. masahi13 marzo 20, 2013 en 5:30 pm

    que tal , es muy bueno lo que hace.. pero una pregunta como lograria que se resaltaran las filas que voy agregando dinamicamente???… ya que con este codigo solo se resaltan las que se cargan al inicio de la pagina……………………..

  21. David Rafael Blanco Leon marzo 20, 2013 en 6:23 pm

    El codigo Completo es:

    .tr_hover {background-color: #ffccee}

    $(document).ready(function() {
    $(“#table_customer tbody tr”).mouseover(function(index) {
    // a la fila sobre la que esté el ratón (this)
    // le añado la clase que la resaltará
    $(this).addClass(“tr_hover”);
    });

    $(“#table_customer tbody tr”).mouseout(function(index) {
    // a la fila sobre la que esté el ratón (this)
    // le quito la clase que hace que resalte
    jQuery(this).removeClass(“tr_hover”);
    });
    })

    Documento sin título

    Name
    Surname

    Luis
    López

    Pedro
    Fernández

    (obviaremos el tfoot para el ejemplo)

  22. David Rafael Blanco Leon marzo 20, 2013 en 6:24 pm

    <—

    /*

    .tr_hover {background-color: #ffccee}

    $(document).ready(function() {
    $(“#table_customer tbody tr”).mouseover(function(index) {
    // a la fila sobre la que esté el ratón (this)
    // le añado la clase que la resaltará
    $(this).addClass(“tr_hover”);
    });

    $(“#table_customer tbody tr”).mouseout(function(index) {
    // a la fila sobre la que esté el ratón (this)
    // le quito la clase que hace que resalte
    jQuery(this).removeClass(“tr_hover”);
    });
    })

    Documento sin título

    Name
    Surname

    Luis
    López

    Pedro
    Fernández

    (obviaremos el tfoot para el ejemplo)

    */

    —->

  23. kurroman marzo 21, 2013 en 1:03 pm

    ¿Puedes probar reinvocar esas funciones tras el código que añade la fila?

  24. Christian julio 30, 2014 en 3:46 pm

    Gracias kurroman… funciona super bien … limpio y preciso.

  25. Maria Jose junio 19, 2015 en 8:35 am

    Muchisssimas gracias!!!!

  26. Jdeveloper octubre 7, 2015 en 8:17 pm

    Muchas gracias maestro funciona perfectamente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: