Tienes que ejecutar una función cuando se produzca el evento
click
en cualquiera de los elementos contenidos en cada fila. En dicha función, tomas a la fila que contiene al elemento
clickeado y le puedes asignar una clase CSS para asignarle un color de fondo; esto funcionaría con una condición, en la cual verificaría que dicha fila posea o no la clase en cuestión; por lo que si está presente, le quitas la clase, caso contrario, se la asignas.
Código Javascript
:
Ver original$("tr *").on("click", function(event){
var fila = $(this).parents("tr");
event.stopImmediatePropagation();
if (fila.hasClass("resaltar")){
fila.removeClass("resaltar");
}
else{
fila.addClass("resaltar");
}
});
Con el método
.parents()
, pasándole como parámetro la cadena
tr
, tomo de todos los elementos ancestros del elemento afectado por el evento
click
, al que sea un
<tr>
, luego, prevengo el
bubbling utilizando el método
.stopImmediatePropagation()
para que se afecte solo al elemento
clickeado y no a otros en el DOM y, utilizando el método
.hasClass()
, verifico que la fila posea la clase que utilizo para asignarle un color de fondo, que en este ejemplo se llama
resaltar
. Si la tiene, se la quito con el método
.removeClass()
, caso contrario, se la asigno con el método
.addClass()
.
DEMO
Saludos