Jquery .Toggle() 基于 colgroup col id答案

【问题标题】：Jquery .Toggle() based on colgroup col idJquery .Toggle() 基于 colgroup col id
【发布时间】：2012-06-14 17:31:59
【问题描述】：

小提琴是here。

我无法通过 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());
    });

这是表格和列组：

<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，而且您的反馈可能证明我错了。

【问题讨论】：

fieldset.techtable 在哪里？我看到的只是section.techtable
您是否试图通过在 colgroup 中隐藏 col 来隐藏整个表格列？我无法让它真正做任何事情。 jsfiddle.net/HvGLu 至于你关于th 的问题，隐藏th 不会隐藏它对应的td，它们必须分别隐藏。

标签： javascript jquery html-table toggle colgroup

【解决方案1】：

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

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

【讨论】：

感谢您提供 colgroup 不会隐藏的信息。我想这就是为什么我已经敲了两个多小时的头了。非常感谢您帮助非常小的开发人员。

【解决方案2】：

你想这样做吗？

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

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

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

【讨论】：

是的，它不起作用，尽管您的行比我的行多了一对单引号。
@chrisFrisina：其实我去掉了一对撇号。
哎呀，我的错误，引用了彼此的错误。第二个示例正确选择了正确的 colgroup，但没有任何反应。 .toggle() 可以应用于 colgroup 吗？
@chrisFrisina：可能不会。 colgroup 甚至不是视觉元素。我的经验是，无论如何隐藏表格的某些部分都不是很好。

【解决方案3】：

尝试以下方法：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：