jQuery resaltando columnas seleccionadas solo en una tabla

Question

Veo esta publicación en highlighting even columns pero ¿puedo resaltar solo las columnas seleccionadas?

Este es el código que utilizan:

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue"); 

Pero me gustaría: NOTA: el class="highlight" estarán en las columnas seleccionadas, por lo que si he seleccionado la columna 3 de la class="highlight" se eliminaría de la columna 2 y ha añadido a la columna 3. jQuery necesita agregar la clase basada en la columna seleccionada.

<table class="tbl"> 
    <tr> 
     <th class="firstColumn"> 
      Cell 1:Heading 
     </th> 
     <th class="highlight"> 
      Selected column so this should be highlighted 
     </th> 
     <th> 
      Cell 3:Heading 
     </th> 
     <th> 
      Cell 4:Heading 
     </th> 
     <th> 
      Cell 5:Heading 
     </th> 
    </tr> 
    <tr> 
     <td> 
      Cell 1:Row 1 
     </td> 
     <td class="highlight"> 
      Selected column so this should be highlighted 
     </td> 
     <td> 
      Cell 3:Row 1 
     </td> 
     <td> 
      Cell 4:Row 1 
     </td> 
     <td> 
      Cell 5:Row 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Cell 1:Row 2 
     </td> 
     <td class="highlight"> 
      Selected column so this should be highlighted 
     </td> 
     <td> 
      Cell 3:Row 2 
     </td> 
     <td> 
      Cell 4:Row 2 
     </td> 
     <td> 
      Cell 5:Row 2 
     </td> 
    </tr> 
</table> 

Answer 1

Es posible que desee echar un vistazo a jQuery tableHover plugin para lograrlo. A continuación, utilice algo como esto

$('table.tbl').tableHover({ 
    colClass: 'hover', 
    clickClass: 'click', 
    headCols: true, 
    footCols: true 
}); 

EDIT:

Algo como esto?

Working Demo- Haga clic en cualquier celda, para poner de relieve la columna

Código de demostración -

$(function() { 
    var rows = $('table.tbl tr'); 

    rows.children().click(function() { 

    rows.children().removeClass('highlight'); 
    var index = $(this).prevAll().length; 
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight'); 

    }); 
}); 

Answer 2

Si crea un enlace en sus cabeceras de la tabla, se puede hacer algo como esto :

$("table.tbl th a").click(function() { 
    var colnum = $(this).closest("th").prevAll("th").length; 

    $(this).closest("table").find("tr td").removeClass("highlight"); 
    $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight"); 
} 

Eso configurará todas las celdas debajo del enlace cliqueado para clase "resaltar".

Por supuesto, aún debe establecer el estilo correcto en el archivo CSS:

table.tbl tr .highlight { background-color: blue; } 

Answer 3

tienen que concidered usando colgroups en lugar de añadir clases a cada célula?

i sólo recientemente comenzó a ver el poder de colgroups mí mismo, y que funciona de esta manera:

.highlight { 
 
    background-color: yellow; 
 
}

 <table id="myTable"> 
 
    \t  
 
    \t  <colgroup class="highlight"></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  
 
    \t  <thead> 
 
    \t  <tr> 
 
    \t   <th>header1</th> 
 
    \t   <th>header2</th> 
 
    \t   <th>header3</th> 
 
    \t   <th>header4</th> 
 
    \t   <th>header5</th> 
 
    \t  </tr> 
 
    \t  </thead> 
 
    \t  <tbody> 
 
    \t  <tr> 
 
    \t   <td>cell a</td> 
 
    \t   <td>cell b</td> 
 
    \t   <td>cell c</td> 
 
    \t   <td>cell d</td> 
 
    \t   <td>cell e</td> 
 
    \t  </tr> 
 
     \t <tbody> 
 
    <table>

esto haría una tabla con 5 columnas, donde 1 columna tiene clase CSS para resaltar el primer col. así que, en realidad, lo único que tienes que hacer entonces es agregar una función al desplazamiento de cada celda para agregar la clase de resaltado al grupo de columnas correspondiente.

hay una videoguia completa se puede encontrar aquí: table fix header, and row + column highlighting.

* EDITADO la respuesta porque era irrelevante, leí la pregunta equivocada, y respondiendo a una cuestión totalmente diferente. (Añadido una respuesta correcta ahora)

Answer 4

Esto es lo que yo uso para añadir un retículo afecta a mi mesa:

$('tbody td').hover(function() { 
    $(this).closest('tr').find('td,th').addClass('highlight'); 
    var col = $(this).index()+1; 
    $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight'); 
}, function() { 
    $(this).closest('tr').find('td,th').removeClass('highlight'); 
    var col = $(this).index()+1; 
    $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight'); 
}); 

parece correr un poco lento en tablas grandes, aunque (el resaltado se queda atrás).

Answer 5

Si desea admitir colspan y rowspan, primero debe compilar el índice de celda de tabla, es decir. matriz que identifica la posición de la celda en cada fila, independientemente del marcado. Luego necesita rastrear eventos de todas las celdas de la tabla de interés y calcular su compensación en la matriz y las columnas que comparten el índice vertical.

La búsqueda resultante se ilustra en la siguiente animación:

He escrito un plugin que desencadena una wholly.mouseenter y wholly.mouseleave eventos para columnas. Wholly.

Answer 6

Puede usar un complemento llamado totalmente. Puedes leer el tutorial completo sobre cómo integrarlo aquí http://voidtricks.com/wholly-jquery-plugin/