hide/display tablesorter 过滤器

Question

我希望在使用 tablesorter 时能够 hide/display 过滤器。

使用 table 排序器运行良好，但是当我添加一个按钮来执行时：

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';
        }
    }
}

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

由于我的英语和 css/js 技能很差，我只是希望我没有在文档中遗漏任何关于它的内容，但我尝试了 thousant 次但没有成功。

感谢您的帮助

Answer 1

正如安德烈亚斯指出的那样，我在本应使用 ''

的地方使用了 'inline'

Answer 2

有个filter_hideFilters option that minimizes the filter row until the user hovers over it. It is also accessible friendly in that the user can use the tab key gain access the filter inputs (demo).

如果您只想 hide/show 过滤行，那么这个基本代码就可以工作 (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();
    });
});

hide/display tablesorter 过滤器

hide/display filter for tablesorter

javascript

css

jquery

tablesorter

filter