[解決済み] HTMLテーブルのカラムを隠す／表示する

質問

いくつかの列を持つHTMLのテーブルがあり、jqueryを使用して列選択機能を実装する必要があります。 ユーザーがチェックボックスをクリックすると、テーブルの対応するカラムを隠したり表示したりしたいのです。 テーブルのすべてのtdにクラスを付けずにこれを行いたいのですが、jqueryを使用して列全体を選択する方法はありますか？ 以下は、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>

解決方法は？

すべてのtdにクラスを付けることなく、これを行いたい。

個人的には、class-on-each-td/th/colのアプローチに賛成です。そうすれば、コンテナのclassNameに1回書き込むだけで、カラムのオンとオフを切り替えることができます。

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

これは、どのJSループアプローチよりも高速になります。本当に長いテーブルの場合、応答性に大きな違いが生まれます。

IE6に対応しないでも済むのであれば、隣接セレクタを使って、tdsにclass属性を追加する必要がないようにすることも可能です。あるいは、マークアップをすっきりさせたいのであれば、初期化ステップでJavaScriptから自動的に属性を追加することもできます。