表格排序器的隐藏/显示过滤器答案

【问题标题】：hide/display filter for tablesorter表格排序器的隐藏/显示过滤器
【发布时间】：2015-10-03 07:33:11
【问题描述】：

我希望能够在使用 tablesorter 时隐藏/显示过滤器。

使用表格排序器很好，但是当我添加了一个按钮来执行时：

function display_hide_filter() {

    var filters = document.getElementsByClassName('tablesorter-filter-row');

     for (var i = 0; i < filters.length; i++) {
        var filter = filters[i];
        if (filter.style.display == 'none') {
            filter.style.display='inline';
        } else {
            filter.style.display='none';
        }
    }
}

然后我得到一个奇怪的答案。隐藏过滤器很好，但重新显示会变成将所有过滤器单元格放在第一个标题单元格下。

由于我的英语和 css/js 技能很差，我只是希望我没有错过文档中的一些内容，但我尝试了数千次但没有成功。

感谢您的帮助

【问题讨论】：

在隐藏之前检查过滤器行的实际display 值。不会是inline。
非常感谢安德烈亚斯

标签： javascript jquery css filter tablesorter

【解决方案1】：

有一个filter_hideFilters option 可以最小化过滤器行，直到用户将鼠标悬停在它上面。它也易于访问，因为用户可以使用 Tab 键访问过滤器输入 (demo)。

如果您只想隐藏/显示过滤器行，那么这个基本代码可以工作 (demo)：

HTML

<button type="button">Toggle Filter Row</button>

脚本

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widthFixed: true,
        widgets: ['zebra', 'filter']
    });

    $('button').click(function(){
        $('.tablesorter-filter-row').toggle();
    });
});

【讨论】：

嗨 Mottie，这正是我正在寻找的演示。我浏览了我能找到的所有内容，但没有看到这个...非常感谢您的回答和您在这方面所做的出色工作:)

【解决方案2】：

正如 Andreas 指出的那样，我在应该使用 '' 的地方使用了 'inline'

【讨论】：