Show/hide table 列基于 select 值

Question

场景： 我有一个 table，其中第一列是 "header/legend"，后面的任何列都包含特定年份的数据。然后我有一个 select，其中包含可供选择的年份列表（对应于 table 的列）。

问题： 当一年是 selected 时，我需要在 table 中显示第一列加上 selected 年份的一列和前两年的两列。

我知道第 nth-child 方法，但我想知道是否有一种方法可以在不循环遍历列的情况下实现相同的效果有什么想法吗？

正在进行中： https://jsfiddle.net/wpnj8917/

(still need to show just 3 columns, or less for the last two years in the select)

Answer 1

function hideAll() {
    $('tr td.col').each(function(){
        $(this).hide();
    });
}

function showSelected(selected) {
    var first = parseInt(selected);
    var second = first - 1;
    var third = second - 1;
    $('tr td.'+first+', tr td.'+second+', tr td.'+third).each(function(){
        $(this).show();
    });
}

这是带有最终代码的 fiddle

Show/hide table 列基于 select 值

Show/hide table columns based on a select value

jquery

html-table