jQuery: cambie el color de la fila de la tabla al desplazarse, para que funcionen los eventos de desplazamiento

Question

Quiero resaltar una fila de la tabla cambiando su color, usando jQuery. Haber RTFM, experimentado e investigado extensivamente con poca suerte.

HTML:

<table id="waypointsTable" border="1"> 
<tbody> 
<tr> 
<td>some text</td> 
</tr> ... 

javascript:

$('#waypointsTable > tbody > tr > td').hover(function() { 
    alert(1); 
}, function() { 
    alert(2); 
}); 

En este punto, sólo estoy tratando de obtener las funciones activables al fuego. ¿Debe flotar el hover al tr o al td? ¿Siempre tengo que incluir la referencia de tbody al seleccionar las filas de la tabla y td? ¿Es mejor poner una clase en cada tr o td en lugar del enfoque anterior?

Gracias.

Answer 1

Se ve bien en su mayor parte, si desea desencadenar para cada fila, puede enlazar a la tr directamente.

simplemente:

$('#waypointsTable tr').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}); 

(código completo en http://jsfiddle.net/nicholasstephan/8nbVG/)

debería funcionar ...

Para este caso concreto, el uso de un css: coloque el selector de pseudo haría el trabajo también.

#waypointsTable tr:hover { 
    background-color:yellow; 
} 

Answer 2

No estoy seguro, pero intente poner un div con una clase o una identificación dentro del y vea si eso ayuda.

Answer 3

Si desea cambiar el color de la fila cuando se cernía sobre, a continuación, poner el: flotar en la misma fila. Sin embargo, tenga en cuenta que las propias filas no pueden tener colores de fondo, sólo las células, lo que en términos CSS, que había necesidad de esto:

tr td { background: normal background style here } 
tr:hover td { background: hovered background style here} 

Answer 4

Esto agregará y retire el css, pero esto no va a hacer esto para el fila de la mesa superior p.ej. su fila de encabezado

$("#waypointsTable tr").not(':first').hover(function(){ 
$(this).addClass("tr-hover"); 
    },function(){ 
    $(this).removeClass("tr-hover"); 
    } 
); 

Answer 5

<script type="text/javascript"> 

$("tr").not(':first').hover(
    function() { 
    $(this).css("background","yellow"); 
    }, 
    function() { 
    $(this).css("background",""); 
    } 
); 

</script> 

Demo

Answer 6

Si desea activar el evento para el futuro añadió filas podría utilizar

$("#table_id").on("mouseover", 'tr' function() { 
    //stuff to do on mouseover 
}); 

Answer 7

Otra forma

$('#waypointsTable tr').hover(function() { 
      $(this).toggleClass('hover'); 
    }); 

estilo CSS

.hover { 
    background-color:green; 
} 

Answer 8

Aquí está algo útil links.For más referencia y demostración ver el siguiente enlace.

jQuery Change table row color on hover, getting hover events to work

JS:

$(function() { 
    $("tr:not(:has(th))").mouseover(function() { 
     $(this).addClass("hover"); 
    }); 
    $("tr:not(:has(th))").mouseleave(function() { 
     $(this).removeClass("hover"); 
    }); 
}); 

CSS:

.hover 
    { 
     background-color: #81B441; 
    } 

HTML:

<table class="tblBorder" border='1'> 
<tr class="hover"><th>No</th><th>Page Name</th><th>No of View</th><th>Comments</th></tr> 
<tr><td>1</td><td>Java Script</td><td>28</td><td>10</td></tr> 
<tr><td>2</td><td>CSS</td><td>29</td><td>78</td></tr> 
</table>