javascript - Jquery .Toggle() 基于 colgroup col id

Question

fiddle 是here .

我无法通过 colgroup 的 col id 获取实际列来切换它。我的索引正确匹配，但我不明白如何使用 colgroup 的强大功能来获取整个列。这是我当前的尝试(一直在 fiddle 的底部):

    //Column Button Hider
    $('fieldset.techtable input.column[type=checkbox]').on('change', function() {
        var index = $(this).prevAll('input.column').length+2;
        console.log(index);
        $('fieldset.techtable' #col'+index').toggle()
            //($('#col'+index).toggle());
    });

这是表格和列组:

<section class="techtable">
        <h1>Technologies / Compliance / Certifications</h1>
        <table cellspacing="0">
            <colgroup>
                <col id="col0">
                <col id="col1">
                <col id="col2">
                <col id="col3">
                <col id="col4">
                <col id="col5">
                <col id="col6">
            </colgroup>
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Skill</th>
                    <th>Version(s)</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Elapsed Time</th>
                    <th>Expertise Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Technology</td>
                    <td>J2EE</td>
                    <td>1.5, 1.6, 1.7</td>
                    <td>November, 2011</td>
                    <td></td>
                    <td></td>
                    <td>2</td>
                </tr>
                </tr>...repeating...</tr>
            </tbody>
        </table>
    </section>

我想尝试利用 colgroup 的强大功能，但不确定是否应该使用类 id(如果是的话，在哪里？在 col 组 id 上， <th> ？或每个 <td> ？)。

是 <th> s 干扰 <colgroup> ？也许措辞更好，我应该引用 th 而不是尝试使用 colgroup 吗？

正确的语法方向是有帮助的，一行代码的帮助总是值得赞赏的，但对于这一个，我试图避免将其扩展到更多的代码行，除非我忽略了方法。我假设我不仅正确地获取了 col id，而且您的反馈可能证明我错了。

Answer 1

如果您试图隐藏特定的数据列，则在 colgroup 中隐藏该列是行不通的。

var colIndex = 0; // first column
$(myTable).find("td,th").filter(":nth-child(" + (colIndex+1) + ")").toggle();

我已修改此代码以适用于您的表。这是更新后的fiddle

 var index = $(this).prevAll('input.column').length+2;
 $('colgroup').parent('table').find("td,th").filter(":nth-child(" + (index+1) + ")").toggle();