Ich habe eine HTML-Tabelle mit mehreren Spalten und muss eine Spaltenauswahl mit jquery implementieren. Wenn ein Benutzer auf ein Kontrollkästchen klickt, möchte ich die entsprechende Spalte in der Tabelle ausblenden / einblenden. Ich möchte dies tun, ohne jedem td in der Tabelle eine Klasse zuzuordnen. Gibt es eine Möglichkeit, eine ganze Spalte mit jquery auszuwählen? Unten finden Sie ein Beispiel für HTML.
<table>
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>
<form>
<input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
<input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
<input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
Antworten:
Persönlich würde ich mich für den Class-on-Each-Td / Th / Col-Ansatz entscheiden. Anschließend können Sie Spalten mit einem einzigen Schreibvorgang in className im Container ein- und ausschalten. Dabei werden folgende Stilregeln angenommen:
Dies wird schneller sein als jeder JS-Loop-Ansatz. Bei sehr langen Tischen kann sich dies erheblich auf die Reaktionsfähigkeit auswirken.
Wenn Sie nicht IE6 unterstützen, können Sie Adjazenz-Selektoren verwenden, um zu vermeiden, dass Sie die Klassenattribute zu tds hinzufügen müssen. Wenn Sie das Markup sauberer machen möchten, können Sie es alternativ in einem Initialisierungsschritt automatisch aus JavaScript hinzufügen.
quelle
.hidden {display:none;}
und verwendet.addClass('hidden')
und.removeClass('hidden')
das war etwas schneller als.hide()
und.show()
.Eine Codezeile mit jQuery, die die 2. Spalte verbirgt:
Wenn Ihre Tabelle einen Header (th) hat, verwenden Sie diesen:
Quelle: Eine Tabellenspalte mit einer einzelnen Zeile jQuery-Code ausblenden
jsFiddle zum Testen des Codes: http://jsfiddle.net/mgMem/1/
Wenn Sie einen guten Anwendungsfall sehen möchten, schauen Sie sich meinen Blog-Beitrag an:
Blenden Sie eine Tabellenspalte aus und färben Sie Zeilen basierend auf dem Wert mit jQuery ein .
quelle
Sie könnten Colgroups verwenden:
Ihr Skript könnte dann nur die Wunschklasse ändern
<col>
.quelle
$('table > colgroup > col.yourClassHere')
jQuery-Selektor können Sie immer noch die Hintergrundfarbe der gesamten Spalte festlegen, aber die Sichtbarkeit der Spalte nicht mehr umschalten. Die getesteten Browser waren MSIE 11 , Safari 5 , Chrom 44 , Opera 12 , Mozilla SeaMonkey 2.40 und Mozilla Firefox 43 . "Die meisten Attribute in HTML 4.01 werden in HTML5 nicht unterstützt" - siehe hier .Folgendes sollte es tun:
Dies ist nicht getesteter Code, aber das Prinzip ist, dass Sie die Tabellenzelle in jeder Zeile auswählen, die dem ausgewählten Index entspricht, der aus dem Namen des Kontrollkästchens extrahiert wurde. Sie können die Selektoren natürlich mit einer Klasse oder einer ID einschränken.
quelle
Hier ist eine etwas ausführlichere Antwort, die eine Benutzerinteraktion pro Spalte ermöglicht. Wenn dies eine dynamische Erfahrung sein soll, muss für jede Spalte ein anklickbarer Schalter vorhanden sein, der angibt, ob die Spalte ausgeblendet werden kann, und anschließend eine Möglichkeit, zuvor ausgeblendete Spalten wiederherzustellen.
Das würde in JavaScript ungefähr so aussehen:
Um dies zu unterstützen, fügen wir der Tabelle ein Markup hinzu. In jeder Spaltenüberschrift können wir so etwas hinzufügen, um einen visuellen Indikator für etwas anklickbares zu liefern
Wir erlauben dem Benutzer, Spalten über einen Link in der Tabellenfußzeile wiederherzustellen. Wenn es standardmäßig nicht dauerhaft ist, kann das dynamische Umschalten in der Kopfzeile um die Tabelle drängen, aber Sie können es wirklich überall platzieren, wo Sie möchten:
Das ist die Grundfunktionalität. Hier ist eine Demo mit ein paar weiteren Dingen. Sie können der Schaltfläche auch einen Tooltip hinzufügen, um ihren Zweck zu verdeutlichen, die Schaltfläche etwas organischer in eine Tabellenüberschrift einfügen und die Spaltenbreite reduzieren, um einige (etwas wackelige) CSS-Animationen hinzuzufügen, um den Übergang etwas zu verkürzen nervös.
Arbeitsdemo in jsFiddle & Stack-Snippets:
Code-Snippet anzeigen
quelle
$(document).ready
aber kein Glück.hide-col
zum Entfernen von Spalten, kann aber auch zum Anzeigen des Status verwendet werden, sodass Sie entweder - beim Rendern des HTML- Codes.hide-col
zu jedemtd
& hinzufügentr
und fertig sind. Oder wenn Sie es an weniger Stellen hinzufügen möchten, fügen Sie es in die Kopfzeile ein (dieser Status muss irgendwohin gehen), und verwenden Sie dies bei init, um diesen Spaltenindex über untergeordnete Elemente hinweg auszublenden. Derzeit wartet der Code nur auf die Position beim Klicken, kann jedoch geändert werden, um auch nach der Klassenposition zu suchen. Auch glücklicher Truthahntagclass='hide-col'
überall Sie in Ihrem HTML wollen (wahrscheinlich in in derthead > tr > th
am meisten Sinn macht und es wird abholen , um sicherzustellen , versteckt sie alle Zellen in dieser Spalte und zeigen dynamisch die Wiederherstellung der Fußzeile sowieUnd natürlich die CSS-Möglichkeit nur für Browser, die Folgendes unterstützen
nth-child
:table td:nth-child(2) { display: none; }
Dies ist für IE9 und neuer.
Für Ihren Anwendungsfall benötigen Sie mehrere Klassen, um die Spalten auszublenden:
ect ...
quelle
Das Folgende baut auf Erans Code auf, mit ein paar geringfügigen Änderungen. Getestet und es scheint gut auf Firefox 3, IE7 zu funktionieren.
quelle
quelle
Ohne Klasse? Sie können das Tag dann verwenden:
Und um ihnen zu zeigen, verwenden Sie:
quelle