Tabellenspalten automatisch ausblenden, indem Sie ein Kontrollkästchen mit jQuery aktivieren.

Question

Ich möchte 3 Kontrollkästchen anzeigen, die bereits aktiviert sind, aber sobald der Benutzer ein Kontrollkästchen deaktiviert, verschwindet die zugehörige Spalte.

<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">larry@gmail.com</td> 
</tr> 
<tr> 
<td class="first_name">Mike</td> 
<td class="last_name">Tyson</td> 
<td class="email">mike@gmail.com</td> 
</tr> 
</tbody> 
</table> 

ich es vorstellen wird mit einem Live-Klick-Ereignis zu tun haben, die jede Klasse()

Jede Hilfe ist

.Hide Einstellung geschätzt

Answer 1

Spalten automatisch für Kontrollkästchen versteckt haben, die standardmäßig (Seite Last) versteckt sind, verwenden Sie den folgenden Code zusammen mit dem Klick Element die Spalten zu wechseln:

$("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/

In diesem Beispiel wird auch einen Selektor wie: $ ('table .class_name'); Dies ist ein schnellerer Selektor, wenn Sie den Code auf einer größeren Seite verwenden, da nicht jedes DOM-Element nach den Klassennamen durchsucht werden muss, sondern nur unter Tabellen.

Answer 2

$("input:checkbox").click(function(){ 
     var column = "."+$(this).attr("name"); 
     $(column).toggle(); 
}); 

UPDATE

Schauen Sie sich die Online-Demo hier: http://jsfiddle.net/8BahZ/