Jquery 搜索框在表中不起作用

我在asp.net中创建了一个带有搜索框的简单json表。我正在从数据库中获取数据。我不知道我做错了什么，我的搜索框不工作。有人可以检查我的搜索代码吗

$(document).ready(function () {
    $('.update').hide();
    $('.addRole').click(function () {
        addRole()
    });

    empRoles()
    $(".paginate").paginga({
        item: "> tr",
        itemsPerPage: 5,
        maxPageNumbers: 2
    });
    $('#searchGo').click(function () {
        var searchVal = $('#searchroleName').val();
        if (searchVal == "") {
            $('#searchroleName').addClass("error");
            $('.requiredField').show();
        }
        else {
            $('#searchroleName').removeClass("error");
            $('.requiredField').hide();
        }
    });
    $(".searchClear").click(function () {
        $('#searchroleName').val("");
        $('#roleListTable tr').show();
        $('.requiredField').hide();
        $('#searchroleName').removeClass("error");
    });
         var $rows = $('#roleListTable tr');
         var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
         $rows.show().filter(function () {
         var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
         return !~text.indexOf(val);
    }).hide();
});

---

您的代码工作正常。您只需将搜索代码放入搜索按钮的

else

部分，然后单击“代码”

$('#searchGo').click(function () {

    var searchVal = $('#searchroleName').val();
    console.log('click ' + searchVal);
    if (searchVal == "") {
        $('#searchroleName').addClass("error");
        $('.requiredField').show();
    }
    else {
        $('#searchroleName').removeClass("error");
        $('.requiredField').hide();
        var $rows = $('#roleListTable tr');
        var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
        console.log("trim "+val);
        $rows.show().filter(function () {
          var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
          console.log("show text "+text);
          return !~text.indexOf(val);
        }).hide();
      }
});

试试这个

---

您的代码工作正常。您只需将搜索代码放入搜索按钮的

else

部分，然后单击“代码”

$('#searchGo').click(function () {

    var searchVal = $('#searchroleName').val();
    console.log('click ' + searchVal);
    if (searchVal == "") {
        $('#searchroleName').addClass("error");
        $('.requiredField').show();
    }
    else {
        $('#searchroleName').removeClass("error");
        $('.requiredField').hide();
        var $rows = $('#roleListTable tr');
        var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
        console.log("trim "+val);
        $rows.show().filter(function () {
          var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
          console.log("show text "+text);
          return !~text.indexOf(val);
        }).hide();
      }
});

试试这个

---

经过以下更改后，您的代码在JSFIDLE中工作

删除

}）就在
函数empRoles（）上方{

删除此代码，因为它没有reffrence，并返回js错误

$(".paginate").paginga({
        item: "> tr",
        itemsPerPage: 5,
        maxPageNumbers: 2
);

经过以下更改后，您的代码在JSFIDLE中工作

删除
}）就在
函数empRoles（）上方{

删除此代码，因为它没有reffrence，并返回js错误

$(".paginate").paginga({
        item: "> tr",
        itemsPerPage: 5,
        maxPageNumbers: 2
);

试试这个：


试试这个：


您只需将下面的代码移动/写入
$（“#searchGo”）。单击事件
event

var $rows = $('#roleListTable tr');
     var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
     $rows.show().filter(function () {
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
     return !~text.indexOf(val);
                 }).hide();


var角色列表=[{
“sNo”：“1”，
“roleName”：“设计师”
},
{
“sNo”：“2”，
“roleName”：“开发者”
},
{
“sNo”：“3”，
“roleName”：“人力资源部”
},
{
“sNo”：“4”，
“roleName”：“项目经理”
}
];
$（文档）.ready（函数（）{
$（'.update'）.hide（）；
$（'.addRole'）。单击（函数（）{
addRole（）
});
empRoles（）
$（'#searchGo'）。单击（函数（）{
var searchVal=$（'#searchroleName'）.val（）；
如果（searchVal==“”）{
$（'searchroleName'）.addClass（“错误”）；
$（'.requiredField'）.show（）；
}
否则{
$（'searchroleName'）.removeClass（“错误”）；
$（'.requiredField'）.hide（）；
}
变量$rows=$（“#角色列表tr”）；
var val=$.trim（$（'#searchroleName'）.val（））.replace（/+/g'，）.toLowerCase（）；
$rows.show（）.filter（函数（）{
var text=$（this.text（）.replace（/\s+/g'，）.toLowerCase（）；
return！~text.indexOf（val）；
}).hide（）；
});
$（“.searchClear”）。单击（函数（）{
$（'searchroleName'）.val（“”）；
$（'#角色列表tr'）.show（）；
$（'.requiredField'）.hide（）；
$（'searchroleName'）.removeClass（“错误”）；
});
});
函数empRoles（）{
对于（var i=0；i，您只需将下面的代码移动/写入
$（“#searchGo”）。单击
event

var $rows = $('#roleListTable tr');
     var val = $.trim($('#searchroleName').val()).replace(/ +/g, ' ').toLowerCase();
     $rows.show().filter(function () {
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
     return !~text.indexOf(val);
                 }).hide();


var角色列表=[{
“sNo”：“1”，
“roleName”：“设计师”
},
{
“sNo”：“2”，
“roleName”：“开发者”
},
{
“sNo”：“3”，
“roleName”：“人力资源部”
},
{
“sNo”：“4”，
“roleName”：“项目经理”
}
];
$（文档）.ready（函数（）{
$（'.update'）.hide（）；
$（'.addRole'）。单击（函数（）{
addRole（）
});
empRoles（）
$（'#searchGo'）。单击（函数（）{
var searchVal=$（'#searchroleName'）.val（）；
如果（searchVal==“”）{
$（'searchroleName'）.addClass（“错误”）；
$（'.requiredField'）.show（）；
}
否则{
$（'searchroleName'）.removeClass（“错误”）；
$（'.requiredField'）.hide（）；
}
变量$rows=$（“#角色列表tr”）；
var val=$.trim（$（'#searchroleName'）.val（））.replace（/+/g'，）.toLowerCase（）；
$rows.show（）.filter（函数（）{
var text=$（this.text（）.replace（/\s+/g'，）.toLowerCase（）；
return！~text.indexOf（val）；
}).hide（）；
});
$（“.searchClear”）。单击（函数（）{
$（'searchroleName'）.val（“”）；
$（'#角色列表tr'）.show（）；
$（'.requiredField'）.hide（）；
$（'searchroleName'）.removeClass（“错误”）；
});
});
函数empRoles（）{
对于（var i=0；i在document.ready.which brake结尾有一个额外的右大括号）；
？实际上，这是我在这里复制代码时的错误。但是在我的本地版本中没有错误。@user7397787我在您的示例链接中看不到任何表数据。@user7397787这个
$（“.paginate”）怎么样.paginga
？？似乎是一个输入错误。我删除了此代码，搜索开始工作。也许我没有用于此的库，但搜索对我来说很好。@Ayush这是不同的部分。这是用于分页的，有一个额外的右括号（
）
在document.ready.which brake的末尾？实际上，这是我在这里复制代码时的错误。但是在我的本地版本中没有错误。@user7397787我在您的示例链接中看不到任何表数据。@user7397787这个
$（“.paginate”）怎么样.paginga
？似乎是一个输入错误。我删除了此代码，搜索开始工作。也许我没有用于此的库，但搜索对我来说很好。@Ayush这是不同的部分。这是用于pagination@user7397787-请参见上面的答案-代码片段工作得非常完美。您的代码非常完美，这正是您所需要的喜欢above@user7397787-参见上面的答案-代码片段工作得非常完美。您的代码非常完美，只有一件事您需要喜欢上面的内容