ausblenden von Tabellenspalten automatisch durch ankreuzen einer checkbox mit jQuery

Möchte ich Anzeige 3 Ankreuzfelder, die vorab geprüft werden, aber, sobald der Benutzer deaktiviert ein Feld der zugehörigen Spalte verschwindet.

<p><input type="checkbox" name="first_name" checked> First Name</p>
<p><input type="checkbox" name="last_name" checked> Last Name</p>
<p><input type="checkbox" name="email" checked> Email</p>

Gerenderten html-Code der Tabelle

<table id="report>
<thead>
<tr>
 <th class="first_name">First Name</th>
 <th class="last_name">Last Name</th>
 <th class="email">Email</th>
</tr>
</thead>
<tbody>
<tr>
 <td class="first_name">Larry</td>
 <td class="last_name">Hughes</td>
 <td class="email">[email protected]</td>
</tr>
<tr>
 <td class="first_name">Mike</td>
 <td class="last_name">Tyson</td>
 <td class="email">[email protected]</td>
</tr>
</tbody>
</table>

Ich mir vorstellen, es zu tun haben, mit einem live-Ereignis klicken Sie auf die Einstellung der jeweiligen Klasse zu .hide()

Jede Hilfe ist willkommen

InformationsquelleAutor Brad | 2011-01-12
  1. 4

    Haben Spalten automatisch ausgeblendet, für die Checkboxen, die standardmäßig ausgeblendet sind (laden der Seite), verwenden Sie den folgenden code zusammen mit der klicken Sie auf element zum Umschalten der Spalten:

    $("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();
});

    Demo: http://jsfiddle.net/highwayoflife/8BahZ/4/

    Diesem Beispiel verwendet auch einen Selektor wie: $('table .class_name'); das wird ein schneller selector wenn Sie den code auf einer größeren Seite, da Sie nicht haben, um die Suche durch jedes DOM-element zu finden, der Klasse Namen, es sieht nur unter Tabellen.

    • funktioniert perfekt, danke!
    • code ur gerade meinen Tag gerettet!!
    InformationsquelleAutor Highway of Life
  2. 4
    $("input:checkbox").click(function(){
      var column = "."+$(this).attr("name");
      $(column).toggle();
});

    UPDATE

    Überprüfen Sie heraus die online-demo hier: http://jsfiddle.net/8BahZ/

    • Tolles Beispiel! - Hatte ein paar HTML-Fehler, jedoch. jsfiddle.net/highwayoflife/8BahZ/1
    • funktioniert Super. was ist, wenn ich wollte eine box, die ist standardmäßig deaktiviert, aber es braucht, verstecken die entsprechende Spalte, bis es überprüft werden, indem der Benutzer.
    • den aktuellen code funktioniert für diese situation zu
    • Er Tat es nicht. Ich entfernt "geprüft" aus einer der Checkboxen und es hat nicht funktioniert hier jsfiddle.net/8BahZ
    • des Lebens, Dank für den Hinweis. @Brad hhmm komisch, es machte für mich, wenn man einmal überprüft, die entsprechende Spalte hat, zu verschwinden, richtig? prüfen Sie hier ein letztes mal: jsfiddle.net/8BahZ/3
    • Ich möchte 2 der 3 standardmäßig aktiviert. Wenn das Kontrollkästchen aktiviert ist, wird die Spalte angezeigt, wenn es nicht aktiviert ist, nicht angezeigt, die Spalte. Sorry, wenn ich verwirrt Sie.
    • Ich nahm die andere Antwort als die richtige, aber deiner war richtig, aber ich entschuldige mich für das werfen eine Kurve ball in die Mischung, nachdem Sie beantwortet es ursprünglich, über das der nicht angehackte Checkboxen
    • kein prob, viel Glück mit Ihrer Website (:

    InformationsquelleAutor amosrivera
Schreibe einen Kommentar