Spalte in einer HTML-Tabelle ein- / ausblenden

146

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>
Brian Fisher
quelle
2
Ich hoffe , die Folowing Website helfen würde: fiendish.demon.co.uk/html/javascript/hidetablecols.html
Ich habe diese Lösung mit jQuery implementiert und sie hat perfekt für mich funktioniert: http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
Aaron
1
Laut dem Kommentar von user344059 ist hier das Webarchiv für den defekten Link http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
KyleMit

Antworten:

84

Ich würde dies gerne tun, ohne jedem td eine Klasse zuzuordnen

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:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

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.

Bobince
quelle
7
Vielen Dank für den Rat, ich wollte den HTML-Code sauberer halten, aber die Leistung wurde definitiv zu einem Problem, da sich die Tabellengröße 100 Zeilen näherte. Diese Lösung lieferte eine 2-5-fache Leistungsverbesserung.
Brian Fisher
2
Dieser Ansatz hat in Bezug auf die Leistung Wunder für mich gewirkt. Vielen Dank!
Axelarge
4
Ich habe dies zu meinem CSS hinzugefügt .hidden {display:none;}und verwendet .addClass('hidden')und .removeClass('hidden')das war etwas schneller als .hide()und .show().
Styfle
247

Eine Codezeile mit jQuery, die die 2. Spalte verbirgt:

$('td:nth-child(2)').hide();

Wenn Ihre Tabelle einen Header (th) hat, verwenden Sie diesen:

$('td:nth-child(2),th:nth-child(2)').hide();

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 .

Leniel Maccaferri
quelle
1
Abgesehen davon, dass sie nicht im Beispiel enthalten sind, gibt es nicht ein Problem, bei dem Colspans ignoriert werden? Gut, wenn Sie sie nicht verwenden. Es gibt noch eine andere Frage: stackoverflow.com/questions/1166452/…
Kim R
2
Ich musste den tbody zum Selektor hinzufügen, um zu vermeiden, dass die Fußzeile mit dem Pager ausgeblendet wird: $ ('. Webgrid tbody td: n-tes Kind (1), .webgrid th: n-tes Kind (1)'). Hide ();
Alex
@ KimR Dies kann bei Colspan-Problemen helfen stackoverflow.com/questions/9623601/…
yunzen
Ich weiß nicht genau warum, aber ich musste stattdessen 'nth-of-type' verwenden, damit es funktioniert. Zum Beispiel: $ ('table td: nth-of-type (2)'). Hide ();
Leopoldo Sanczyk
@LeopoldoSanczyk haben Sie Safari verwendet? Scheint, als ob es den n-ten Typ braucht
ykay sagt Reinstate Monica am
12

Sie könnten Colgroups verwenden:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <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>

Ihr Skript könnte dann nur die Wunschklasse ändern <col>.

Luis Melgratti
quelle
Ich scheine mich zu erinnern, dass colgroup keine browserübergreifende Unterstützung hat. Stimmt das nicht mehr?
Brian Fisher
Vielleicht. Ich benutze diese Methode für helight Säulen (Firefox, Safari, Chrome funktioniert gut) habe es nie im IE versucht.
Luis Melgratti
@Brian - IE8 funktioniert nicht und IE8 mit aktiviertem IE7 scheint zu funktionieren.
Nordes
4
Dies scheint in modernen Browsern (Chrome und Firefox) nicht mehr zu funktionieren
JBE
@JBE: Um genau zu sein, funktioniert dies bis zu einem gewissen Grad in modernen Browsern . Mit dem $('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 .
Bass
11

Folgendes sollte es tun:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

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.

Eran Galperin
quelle
11

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:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

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

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

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:

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

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.

Demo Screengrab

Arbeitsdemo in jsFiddle & Stack-Snippets:

KyleMit
quelle
Sie verstecken die nächste 1 Spalte. Wie können Sie die nächste 3 Spalte ausblenden?
Nirmal Goswami
Überprüfen Sie meine Tabelle - i.stack.imgur.com/AA8iZ.png und Frage, die Tabelle HTML enthält - stackoverflow.com/questions/50838119/… Schaltfläche wird nach A, B und C kommen
Nirmal Goswami
Es tut mir leid, eine so alte Antwort wiederzubeleben, aber gibt es eine einfache Möglichkeit, bestimmte Spalten standardmäßig ausgeblendet zu setzen? Ich versuche es mit, habe $(document).readyaber kein Glück
RobotJohnny
1
@RobotJohnny, gute Frage. Dies verwendet die Klasse .hide-colzum Entfernen von Spalten, kann aber auch zum Anzeigen des Status verwendet werden, sodass Sie entweder - beim Rendern des HTML- Codes .hide-colzu jedem td& hinzufügen trund 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 Truthahntag
KyleMit
1
@RobotJohnny, ich habe das Codebeispiel aktualisiert, um auch die Initialisierungsbehandlung einzuschließen. Legen Sie einfach class='hide-col'überall Sie in Ihrem HTML wollen (wahrscheinlich in in der thead > tr > tham meisten Sinn macht und es wird abholen , um sicherzustellen , versteckt sie alle Zellen in dieser Spalte und zeigen dynamisch die Wiederherstellung der Fußzeile sowie
KyleMit
4

Und 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:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

ect ...

Probleme von Sumit
quelle
2

Das Folgende baut auf Erans Code auf, mit ein paar geringfügigen Änderungen. Getestet und es scheint gut auf Firefox 3, IE7 zu funktionieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<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>
</body>
</html>
Paolo Bergantino
quelle
1
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>
Lahbib
quelle
0

Ohne Klasse? Sie können das Tag dann verwenden:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

Und um ihnen zu zeigen, verwenden Sie:

...style.display = 'table-cell';            
Gustavo Ruiz
quelle