添加Eventlistener帮助和建议

时间:2018-01-02 14:13:18

标签: javascript jquery events onclick

我有500多个行表,按照以下代码进行过滤。

当有人点击其中一个过滤器时,我想要一些东西来显示表中剩余的行数。 (如果有可能,每次勾选/点击新复选框时都会更新)

有人可以帮忙吗?

代码长度的道歉

$(document).ready(function () {

var buttons = $('#wiFilter li');
var checkboxes = $('#wiFilter input:checkbox');

$(buttons).click(function(){
    var inpt = $(this).find('input');
    if ($(this).is('.checked')) {
        $(this).removeClass('checked');
    }
    else {
        $(this).addClass('checked');
    }
    if ($(inpt).prop('checked')) {
        $(inpt).removeAttr('checked').change();
    }
    else {
        $(inpt).prop("checked", true).change();
    }
    $(this).blur();
});

$(checkboxes).on("change", function () {

    var arrChecked = $(checkboxes).filter(':checked').map(function () {
        return $(this).val();
    }).get();

    $("#wiTable tr:first").nextAll().show(); // reset the table: show all items

    if (arrChecked.length > 0) {
        $('.WI').each(function(){
            var hideRow = true;
            var arrCategories = $(this).text().split(', ');

            for (i=0; i<arrCategories.length; i++) {
                if (arrChecked.indexOf(arrCategories[i]) > -1) {
                    hideRow = false;
                }
            }
            if (hideRow) {
                $(this).parent().hide();
            }
        });
    }
    $(this).blur();
});


var $rows = $('#wiTable tr:first').nextAll();
$('#wiSearch').keyup(function() {
    // regex looks for all words, in any order, in the text to be matched
    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        str;

    $rows.show().filter(function() {
        str = $(this).text().replace(/\s+/g, ' '); // replace multiple spaces with one space? 
        return !reg.test(str);
    }).hide();
});

// $('#wiSearch')   
        // .focus(function () {
// //           $(this).val('');
// //           $(countriesList).show();
        // })
        // .keyup(function () {
            // var searchval = $(this).val().toLowerCase();

            // $(countriesList).each(function () {
                // if (!$(this).text().toLowerCase().match(searchval)) {
                    // $(this).hide();
                // }
                // else {
                    // $(this).show();
                // }
            // });
        // })
        // .blur(function () {
            // var searchval = $(this).val().toLowerCase();
            // if (!searchval) {
                // $('#RoamingPartners_CountryListSearch').val(RoamingPartners_CountryListSearch_DefaultText);
                // $(countriesList).show();
            // }
        // });

    // $('html').bind('keypress', function(e)
    // {
       // if(e.keyCode == 13)
       // {
          // return false;
       // }
    // });
});

{
var x = $('#wiTable tr:visible').length;
document.getElementById("count").innerHTML = "We've got " + x + " processes that match your query";}

非常感谢提前

0 个答案:

没有答案