Spalte in einer HTML-Tabelle ausblenden / anzeigen

Ich habe eine HTML Tabelle mit mehreren Spalten und ich brauche zur Umsetzung einer Spaltenauswahl mit jquery. Klickt ein Benutzer auf eine checkbox-ich möchte ein - /ausblenden der entsprechenden Spalte in der Tabelle. Ich möchte dies tun, ohne Befestigung, eine Klasse zu jedem td in der Tabelle, gibt es eine Möglichkeit, wählen Sie eine ganze Spalte mit jquery? Unten ist ein Beispiel der 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>

InformationsquelleAutor der Frage Brian Fisher | 2009-01-18

  1. 78

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

    Ich persönlich würde mit der Klasse-auf-jeden-td/th/col Ansatz. Dann kann man den Schalter Spalten-und ausschalten mit einem einzigen schreiben className auf den container, vorausgesetzt, style-Regeln wie:

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

    Diese wird schneller sein als jede JS-loop-Ansatz; für wirklich lange Tische kann es einen großen Unterschied machen, um die Reaktionsfähigkeit.

    Wenn Sie bekommen können Weg mit nicht unterstützen IE6, Sie könnte verwenden Nachbarschaft Selektoren zu vermeiden, fügen Sie die Attribute der Klasse zu tds. Oder alternativ, wenn Ihr Anliegen ist, dass die markup-cleaner, könnte man hinzufügen, Sie von JavaScript automatisch eine Initialisierung Schritt.

    InformationsquelleAutor der Antwort bobince

  2. 227

    Einer Zeile code mit jQuery verbirgt die 2. Spalte: 

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

    Wenn Ihre Tabelle hat-header(th), verwenden Sie diese:

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

    Quelle: Ausblenden eine Spalte einer Tabelle mit einer Einzigen Zeile jQuery code

    jsFiddle um den code zu testen: http://jsfiddle.net/mgMem/1/

    Wenn Sie sehen wollen, ein guter use-case, take a look at my blog post:

    Ausblenden einer Spalte der Tabelle und einfärben von Zeilen basierend auf dem Wert mit jQuery.

    InformationsquelleAutor der Antwort Leniel Maccaferri

  3. 11

    könnten Sie colgroups:

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

    dein Skript könnte dann ändern Sie einfach nur den Wunsch <col> Klasse.

    InformationsquelleAutor der Antwort Luis Melgratti

  4. 9

    Sollte Folgendes tun:

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

    Dieser code ist ungetestet, aber das Prinzip ist, dass Sie wählen Sie die Zelle in der Tabelle in jeder Zeile, entspricht der gewählte index extrahiert aus der checkbox name. Man könnte natürlich beschränken Sie die Selektoren, die mit einer Klasse oder ID.

    InformationsquelleAutor der Antwort Eran Galperin

  5. 3

    Und natürlich die CSS-einzige Möglichkeit für Browser, die das unterstützen nth-child:

    table td:nth-child(2) { display: none; }

    Dies ist für IE9 und neuer.

    Für Ihren Anwendungsfall, müssten Sie mehrere Klassen für die Spalten ausblenden:

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

    ect...

    InformationsquelleAutor der Antwort ProblemsOfSumit

  6. 1

    Folgenden wird aufbauend auf Eran code, mit ein paar kleinen änderungen. Es getestet und es scheint zu funktionieren auf Firefox 3, IE7.

    <!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>

    InformationsquelleAutor der Antwort Paolo Bergantino

  7. 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>

    InformationsquelleAutor der Antwort lahbib

  8. 0

    Ohne Klasse? Sie können den Tag dann:

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

    Sein und Ihnen zu zeigen verwenden:

    ...style.display = 'table-cell';

    InformationsquelleAutor der Antwort Gustavo Ruiz

Schreibe einen Kommentar