таблица фильтра строк с помощью окна поиска на кнопку мыши

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(""); 
     }); 

К

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

Смотрите обновленный скрипку here