jquery - 通过在标题 col >> jQuery 解决方案上添加一个类来隐藏我的表的整个列

Question

我有一个表格，我想通过简单地将名为“masked”的类应用到标题 col 来隐藏整个列(第 3 个 >> head+body)，如下所示:

<table>
 <thead>
    <th>aaa</th>
    <th class="masked">bbb</th>
    <th class="masked">ccc</th>
 </thead>
 <tbody>
    <tr>
        <td>a1</td>
        <td>b1</td>
        <td>c1</td>
    </tr>
    <tr>
        <td>a2</td>
        <td>b2</td>
        <td>c2</td>
    </tr>
    <tr>
        <td>a3</td>
        <td>b3</td>
        <td>c3</td>
    </tr>
 </tbody>

CSS:

.masked {
    display:none;
}

此时只有heading col被屏蔽了。如何屏蔽整个列？

在此处查看演示:http://jsbin.com/axukob/1/

谢谢。

编辑--------------------

我可以使用 jQuery 解决方案，因为它似乎很难只使用 CSS。但将类(class)添加到标题“th”对我来说很重要。

请注意，我可能要屏蔽不止 1 列。

Answer 1

既然你愿意使用 JS(你将不得不使用它)，你可以这样做:

示例:http://jsfiddle.net/mBhB3/1/

$(document).ready(function() {
    var masked = $('.masked');
    $.each(masked, function() {
        var idx = $(this).index();
        $.each($('tr'), function() {
            $(this).find('td').eq(idx).hide();
        });
    });
});