Por razones de usabilidad, en tablas con mucho contenido, puede ser util detacar la fila donde una esta posicionado.
Realizar un destacado de filas con el evento hover mediante jQuery es simple. Sólo basta con atar el evento hover a la fila y estableciendo los 2 eventos(mouseenter / mouseleave).
Para complementar esto, busque el método para agregar simultaneamente un destacado a la columna por la cual se esta pasando con el mouse.
Para esto necesitamos saber la ubicación (index) de la celda para asi poder agregar el estilo destacado a las celdas de las otras filas, para esto necesitaremos agregar el evento jQuery hover a la celda (td) es que uno se encuentra posicionado y no a la fila (tr). Sabiendo esto, ya podremos recorrer cada fila de la tabla buscando el index obtenido.
El Javascript:$(document).ready(function(){
$("table tbody tr:odd").addClass("odd");
function celdasReferencia(e){
var indexCelda = $(e).parent().find("td").index(e);
var indexTit = indexCelda+1;
var selCabec = $(e).parents("table").children("thead").find("th:eq("+indexTit+")");
var selCeldas = $(e).parent().siblings("tr").find("td:eq("+indexCelda+")");
var conjuntoCeldas = selCabec.add(selCeldas);
return conjuntoCeldas;
};
$("td").hover(
function(){
$(this).addClass('celdaSel').parent().addClass('filaSel');
celdasReferencia(this).addClass('colSel');
},function(){
$(this).removeClass('celdaSel').parent().removeClass('filaSel');
celdasReferencia(this).removeClass('colSel');
}
);
});DEMO

No hay comentarios:
Publicar un comentario