Что делает этот код JQuery для фильтрации данных из таблицы?

Question

Может кто-нибудь объяснить мне, что делает этот код ниже?

<script> 
$(document).ready(function() { 
    $('input.filter').on('keyup', function() { 
      var rex = new RegExp($(this).val(), 'i'); 
      $('.searchable tr').hide(); 
      $('.searchable tr').filter(function() { 
       return rex.test($(this).text()); 
      }).show(); 
     }); 
}); 
</script> 

он отфильтровывает данные в таблице, в зависимости от значения ввода.

Я могу понять основные функции, но мне не хватает общей концепции мышления.

Может кто-нибудь объяснить это?

Answer 1

Каждый раз, когда вы вводите что-то (событие keyup), спрячьте все <tr>, затем найдите все <tr>, которое содержит введенный вами текст, а затем отобразите их.

<script> 
    $(document).ready(function() { 

    // key up from an input with class filter 
    $('input.filter').on('keyup', function() { 

      // create regular expression from value of the input 
      var rex = new RegExp($(this).val(), 'i'); 

      // hide all <tr> 
      $('.searchable tr').hide(); 

      // show all <tr> which contains your text 
      $('.searchable tr').filter(function() { 
       return rex.test($(this).text()); 
      }).show(); 
     }); 
}); 
</script> 

Регулярное выражение часть:

вар рекс = новый RegExp ($ (это) .val(), 'я');

Это создаст регулярное выражение, которое будет соответствовать значению, введенному вами на входе. i аргумент означает нечувствительность к регистру.

В filter() вы тестируете return rex.test($(this).text());. Здесь вы используете функцию пользовательского фильтра. Только строки, содержащие ваш текст, не будут отфильтрованы (а затем показаны эти строки).

Например:

var rex = new RegExp('hello', 'i'); //you typed "hello" in the input 
rex.test('hello world'); // true - contains hello 
rex.test('HEllo world'); // true - contains hello (case insensitive) 
rex.test('lorem ipsum'); // false - no hello present 

JQuery фильтра()

Если следующий HTML:

<a href="http://www.google.com">Link 1</a> 
<a href="http://google.com" rel="nofollow">Link 2</a> 
<a href="https://www.google.com">Link 3</a> 
<a href="http://bing.com" class="red">Link 4</a> 
<a href="http://www.bing.com" class="red">Link 5</a> 
<a href="http://localgoogle.com">Link 6</a> 

и запустить $('a').hide().filter('.red').show();, Link 5 будет показано только Link 4 и , Это та же концепция для вас, но вместо этого используется собственный фильтр.