1

小提琴在这里。

我无法通过 colgroup 的 col id 抓取实际列来切换它。我的索引正确匹配，但我不明白如何使用 colgroup 的力量来抓取整个列。这是我目前的尝试（一直在小提琴的底部）：

    //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());
    });

这是表格和colgroup：

<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 group id 上，<th>？或每个<td>？）。

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

指向正确的语法方向是有帮助的，并且总是感谢一行代码来提供帮助，但是对于这一点，我试图避免将其扩展到更多的代码行，除非我忽略了方法论。我假设我不仅正确地抓住了 col id，而且您的反馈可能证明我错了。

4

4 回答 4

3

如果您试图隐藏特定的数据列，则在 colgroup 中隐藏 col 不会这样做。

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

我已修改此代码以使用您的表。这是更新的小提琴

 var index = $(this).prevAll('input.column').length+2;
 $('colgroup').parent('table').find("td,th").filter(":nth-child(" + (index+1) + ")").toggle();
于 2012-06-11T20:06:57.417 回答
1

你想这样做吗？

$('fieldset.techtable #col' + index).toggle();

由于 id 在页面中是唯一的，通常只针对以下内容就足够了：

$('#col' + index).toggle();
于 2012-06-11T19:39:59.357 回答
1

尝试以下操作：

$(".techtable td:nth-child("+index+1+")").toggle();

看到这个：Hide/Show Column in an HTML Table

于 2012-06-11T20:08:37.773 回答
0

我认为您无法切换列的可见性，因为列是元数据/伪元素而不是页面上的实际元素（实际上是您尝试切换tr的每个元素的第 N 个）。td我知道出于这个原因尝试一致地设置它们的样式时会出现问题（请参阅我的答案以获取解释/调查）。

于 2012-06-11T20:10:21.127 回答