Question

我有jsfiddle隐藏并显示根据关键字输入（#search-criteria）。大多数工作正常，但有这个错误，我不知道它来自哪里（甚至在查看console.log后）。

问题：当搜索结果应为＆＃34; 0＆＃34;时，它显示为＆＃34; 1＆＃34;
例A：关键字=＆＃34;苹果＆＃34;，搜索结果=＆＃34; 2＆＃34;
例B：keyword =＆＃34; applee＆＃34 ;,搜索结果=＆＃34; 0＆＃34;
例C：keyword =＆＃34; appleee＆＃34;，搜索结果=＆＃34; 1＆＃34; *这应该是＆＃34; 0＆＃34;，并且没有显示行但它计数＆＃34; 1＆＃34;！？
注意：我在找不到搜索时附加一个新行但稍后将其删除。

$("#search-criteria").on("keyup", function () {

    var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
        return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
    }).toLowerCase();
    var row = "table#table-body tbody>tr";

    if (keyword !== "") {
        $(row).each(function () {
            var td_word = $(this).text().toLowerCase();
            var srowCount = $(row).filter(":visible").length;
            //shorthand if function
            $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
            document.getElementById('count').innerHTML = srowCount;
            console.log(srowCount);

            if (srowCount === 0) {
                $("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5">Search not found</td></tr>');
                $("tr.s_empty").show();
            } else {
                $("tr.s_empty").remove();
            }

        });
    } else {
        $(row).show();
        document.getElementById('count').innerHTML = $(row).length;
    }

});

提前谢谢。

Answer 1

工作正常

//search function
$("#search-criteria").on("keyup", function () {
var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
    return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
}).toLowerCase();
var row = "table#table-body tbody>tr";

if (keyword !== "") {
    $(row).each(function () {
        var td_word = $(this).text().toLowerCase();
        //shorthand if function
        $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
    });
    var srowCount = $(row).filter(":visible").length;
    document.getElementById('count').innerHTML = srowCount;
    if (srowCount === 0) {
        if(!$(row).last().hasClass('s_empty'))
        {
            $("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5">Search not found</td></tr>');
        }
        $("tr.s_empty").show();
    } else {
        $("tr.s_empty").remove();
    }
} else {
    $("tr.s_empty").remove();
    $(row).show();
    document.getElementById('count').innerHTML = $(row).length;
}

});

Answer 2

问题是你首先使用rowCount，然后你正在进行show hide，试试这个

$("#search-criteria").on("keyup", function () {

    var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
        return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
    }).toLowerCase();
    var row = "table#table-body tbody>tr";

    if (keyword !== "") {
        $(row).each(function () {
            var td_word = $(this).text().toLowerCase();
            var srowCount;
            //shorthand if function
            $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
            srowCount = $(row).filter(":visible").length;
            document.getElementById('count').innerHTML = srowCount;
            console.log(srowCount);

            if (srowCount === 0) {
                $("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5">Search not found</td></tr>');
                $("tr.s_empty").show();
            } else {
                $("tr.s_empty").remove();
            }

        });
    } else {
        $(row).show();
        document.getElementById('count').innerHTML = $(row).length;
    }

});

过滤后的行计数错误（使用if语句）

2 个答案: