Ukrywanie kolumn tabeli w jQuery

W tutorialu zaimplementujemy funkcjonalność pokazywania/ukrywania kolumn tabeli za pomocą checkboxów. Zaczniemy od stworzenia przykładowej tabeli w html oraz checkboxów służących do pokazywania i ukrywania kolumn.

<div id="checkbox-group">
<p><input type="checkbox" name="empid">ID</p>
<p><input type="checkbox" name="fname">First Name</p>
...
 
<table id="tab">
    <thead>
        <tr>
            <th class="id">Id</th>
            <th class="fname">First Name</th>
         ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="id">1</td>
            <td class="fname">Jan</td>
         ...
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="fname">Anna</td>
         ...
        </tr>
    </tbody>
</table>

Zauważ, że odpowiednim elementom td i th dodaliśmy klasy. Będziemy je wykorzystywać w jQuery. Zaznaczenie checkboxa będzie powodowało pokazanie odpowiedniej kolumny, a odznaczenie - ukrycie kolumny. Kod w jQuery przedstawia się następująco.

$(function () {
	var $chk = $("#checkbox-group input:checkbox");
	var $tbl = $("#tab");

	$chk.prop('checked', true);

	$chk.click(function () {
		$tbl.find('tr .'+($(this).attr("name"))).toggle();
	});
});