筛选表行单击

Question

这是我的表滤波器KEYUP功能

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

我想按钮相同功能，点击

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

我做错了的是什么？和当有人点击cancel按钮应该显示完整的表格时，可以有人提出想法。

https://jsfiddle.net/hzrd8b8t/

Answer 1

var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
$(this) != $('#searchroleName'); 
$(this) == $rows; 

所以只保留$（本）在该行代码。 您可以使用console.log（）来验证它。

Answer 2

你必须点击取消按钮后显示行... 只要改变

$(".searchClear").click(function(){ 
     $('#searchroleName').val(""); 
     }); 

TO

$(".searchClear").click(function(){ 
    $('#searchroleName').val(""); 
    $('#roleListTable tr').show(); 
}); 

请参阅更新的小提琴here