javascript - 带复选框的 Bootstrap 表过滤器

Question

我调整了以下jsfiddle:http://jsfiddle.net/16bmcr6d/4/

这是我到目前为止的代码:

$(document).ready(function () {

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

}(jQuery));

});

如何进一步调整它，以便在选中该复选框后隐藏所有余额？

<label><input id="filter2" type="checkbox" checked="">Filter zero balances</label>

另外，如何存储此值，以便下次加载页面时，复选框仍处于选中状态？

在示例中，当选中该复选框时，仅应显示英镑和格鲁吉亚 Liari。

Answer 1

我调整了你的 fiddle ，让你了解如何做到这一点:

updated Fiddle

filter - 函数的基本作用是仅返回 DOM - 元素，其中传递的匿名函数返回 true，因此在这种情况下，您只需提供拟合函数，例如:

返回 $(this).find('td').eq(3).text() !== "0"

通过使用.find('td').eq(3)，我只需选择存储余额的td元素，这是第四个td 在你的表行中(.eq 是基于零索引的)

当复选框上触发 change 事件时执行的整个代码:

$('#filter2').on('change', function(){

    if(this.checked){
        $('.searchable tr').hide();
        $('.searchable tr').filter(function() {
            return $(this).find('td').eq(3).text() !== "0"
        }).show();
    }else{
        $('.searchable tr').show();
    }            

});

有多种方法可以在不同的 session 中保持复选框的状态，您可以使用 Cookies或类似LocalStorage例如。