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