resaltar la fila de la mesa con jQuery

Sé que hay toneladas de publicaciones sobre esto, pero estoy perdido en cuanto a por qué la mía no funciona.

Estoy tratando de resaltar una fila en mi tabla:

...... ... 

css:

 .highlight { background-color: #a8cb17; } 

y finalmente mi jQuery:

 jQuery(document).on("click", ".videorow", function() { //highlight table jQuery(".highlight").removeClass("highlight"); jQuery(this).addClass("highlight"); }); 

Básicamente quiero resaltar una fila y borrar cuando se selecciona una nueva fila. Esta es la primera parte que ni siquiera puedo entender.

Además, quiero resaltar toda la fila, excepto que no quiero que la última columna active un resaltado. En otras palabras, puede hacer clic en la última columna de la fila, pero eso no cambiará el resaltado.

Algo como:

 jQuery(document).on("click", ".videorow", function() { //highlight table jQuery(".highlight").removeClass("highlight"); jQuery('table tr td:not(:last-child)').addClass("highlight"); }); 

Cualquier orientación sobre estos dos temas es apreciada.

EDIT : escribiendo demasiado rápido. Los errores de syntax son solo yo escribiendo esto en lugar de copiar … arreglado ahora

Intente asegurarse de que su TD esté dentro de su TR, para empezar, pensé que podría ser solo su pregunta, no su código, por error.

  ...  

Luego, intente capturar el evento de clic en

, no en

. Muchas cosas funcionan mejor en TD que en TR.

 $('document').on( "click", "tr.videorow td", function(ev) { console.log('click videorow event', ev); // do whatever. }); 

Si no puede hacerlo funcionar, intente simplemente capturar en “td” hasta que el controlador de eventos funcione y aparezca un mensaje de registro. (Estás utilizando Chrome o Firefox, supongo.)

Adjuntar los controladores de eventos a la tabla mediante un selector de # ID, en lugar de todo el documento, también podría ser más eficiente.

 $('#MyTable').on( ...); 

El comentario de Anh Tú sobre el resaltado de CSS, también es correcto. Haz que aplique el fondo al TD, no al TR. También puede intentarlo! Importante si aún tiene problemas (consulte http://css-tricks.com/when-using-important-is-the-right-choice/ para obtener más información).

 .highlight td {background-color: #a8cb17 !important;} 

Gracias Anh! Espero que esto ayude.

 jQuery(document).on("click", "tr.videorow > td", function() { var $this = jQuery(this); // ignore clicks on last column if ( $this.is(":last-child") ) return; // unhighlight currently selected row jQuery(".highlight").removeClass("highlight"); // change the highlight of the row $this.parent().addClass("highlight"); }); 

En tu código, escribiste:

 jQuery(table tr td:not(:last-child)).addClass("highlight"); 

Tiene error de syntax. El parámetro pasado a la función jQuery no es una string . Lo cambié a este

 jQuery('table tr td:not(:last-child)').addClass("highlight"); 

en la fila, haga clic en utilizar lo siguiente:

 $('.row_selected').removeClass('row_selected');$(this).toggleClass('row_selected');