¿Cómo ocultar las columnas de la tabla en jQuery?

Question

Tengo una tabla con muchas columnas. Quiero darles a los usuarios la opción de seleccionar columnas para que se muestren en la tabla. Estas opciones serían casillas de verificación junto con los nombres de las columnas. Entonces, ¿cómo puedo ocultar/mostrar las columnas de la tabla en función de las casillas de verificación?

¿Ocultaría (utilizando .hide()) cada td en cada fila funciona? Puede ser que pueda asignar el valor de la casilla de verificación a la ubicación de la columna en la tabla. Entonces primera casilla de verificación significa primera columna y así sucesivamente. Y luego esconder recursivamente ese td 'numerado' en cada fila. Funcionaría eso?

Answer 1

Probar:

function hideColumn(columnIndex) { 
    $('#mytable td:nth-child('+(columnIndex+1)+')').hide(); 
} 

Ésta es una versión bastante básico - que asume la tabla no utilizar <TH> elementos o tienen tramos de columnas variables, pero el concepto básico es que hay. Tenga en cuenta que nth-child uses 1-based indexing. He agregado 1 en la última etapa para compensar eso.

Answer 2

Creé un script que hace lo que Rex sugiere. Hay una casilla de verificación (o elemento) en cada columna que, al hacer clic, determina en qué columna se basa en el enésimo niño y luego oculta las mismas en cada TR.

Antes .hide() Agregaría una clase a la que podría hacer referencia para devolver la columna.

El problema que tenía era que estaba trabajando con tablas de gran estilo donde algunas filas tenían colspans y algunas TDs tenían clases únicas basadas en su posición en la fila. Me refiero a los problemas en IE, donde IE no siempre muestra() los TD ocultos con el estilo adecuado. Parecía que IE tenía problemas para volver a dibujar anotaciones.