Wie können Tabellenspalten in jQuery ausgeblendet werden?

Question

Ich habe eine Tabelle mit vielen Spalten. Ich möchte Benutzern die Möglichkeit geben, Spalten auszuwählen, die in der Tabelle angezeigt werden sollen. Diese Optionen wären Kontrollkästchen mit den Spaltennamen. Wie kann ich Tabellenspalten basierend auf Kontrollkästchen ausblenden/einblenden?

Würde Verstecken (mit .Hide()) jedes td in jeder Zeile arbeiten? Möglicherweise kann ich der Position der Spalte in der Tabelle einen Wert zuweisen. Also erste Checkbox bedeutet erste Spalte und so weiter. Und dann verstecken Sie rekursiv das "nummerierte" td in jeder Reihe. Funktioniert das?

Answer 1

Versuchen:

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

Dies ist eine ziemlich Basisversion - nimmt Ihre Tabelle nicht <TH> Elemente verwendet oder variable Spalte Spannweiten haben, aber das Grundkonzept besteht. Beachten Sie, dass nth-child uses 1-based indexing. Ich habe 1 auf der letzten Stufe hinzugefügt, um das auszugleichen.

Answer 2

Ich habe ein Skript erstellt, das das tut, was Rex vorschlägt. Es gibt ein Kontrollkästchen (oder Element) in jeder Spalte, das beim Klicken darauf hinweist, auf welcher Spalte es basiert, basierend auf dem n-ten Kind und dann dieselben in jedem anderen TR versteckt.

Bevor .hide() würde ich eine Klasse hinzufügen, auf die ich verweisen könnte, um die Spalte zurückzugeben.

Das Problem, das ich hatte, war, dass ich mit stark gestylten Tabellen arbeitete, wo einige Reihen Colspans hatten und einige TDs einzigartige Klassen hatten, die auf ihrer Position in der Reihe basieren. Ich schimpfe auf Probleme in IE, wo IE die versteckten TDs nicht immer mit dem richtigen Styling zeigen würde. Es sah so aus, als hätte der IE Schwierigkeiten, TDs neu zu zeichnen.