selección de renglones con jquery

[miguelalexep]

Buenas noches, estoy intentando hacer lo siguiente, tengo una tabla con registros la cual se carga con ajax. En esta se muestran 10 registros. En cada renglón hay una columna donde va un checkbox y en las otras columnas van los demás datos. Lo que se pretende hacer es que cuando se de click en el checkbox, su respectivo renglón cambie de color indicando que esta seleccionado. Para esto agregue un css cuando se diera click al checkbox para que el renglón cambiara de color lo cual si funciono.

El problema que estoy teniendo es que no solo se desea, que al hacer click al checkbox el renglón se ponga de color, si no que si se llega a hacer click en el renglón igual este se debe poner de color. Si se da click en el renglón o en el checkbox. El renglon tiene que ponerse de color y cuando el renglón ya este seleccionado. Si se da click a cualquiera de las dos opciones se debe de quitar la selección. Si alguien tiene alguna idea. Ya que solo a estado funcionando con el checkbox ya que la selección del renglón esta causando problemas ya que choca con el checkbox

[Alexis88]

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:

$("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

[miguelalexep]

Gracias, ya lo probé, solo que aquí esta haciendo lo que no quiero. Cuando seleccionas el checkbox debe de ponerse de color el renglón. Así como cuando seleccionas el renglón este se debe de poner de color, pero debe de seleccionar el checkbox También. Así como cuando se quita la selección del checkbox se debe de quitar el color del renglón.

[Alexis88]

Verifica si el checkbox está marcado mediante la propiedad checked.

Código Javascript:

//Si el elemento clickeado no es un checkbox
if (!$(this).is(":checkbox")){
    //Buscamos en la fila al checkbox y verificamos si está marcado
    if (fila.find(":checkbox").prop("checked")){
        fila.find(":checkbox").prop("checked", false);
    }
    else{
        fila.find(":checkbox").prop("checked", true);
    }   
}
 

NOTA: Este bloque de código debe de ir adherido al anterior, no en su reemplazo.

Saludos

[miguelalexep]

Lo del checkbox si quedo, nomas que estuve viendo lo del parents y lo que esta haciendo es poner de color los renglones pares. Es decir si doy click a un renglón y luego a otro solo colorea el segundo.

[Alexis88]

Si no muestras lo que tienes hecho, no podremos ayudarte. No podemos adivinar.

No olvides usar el highlight respectivo.