Измените JavaScript, чтобы он работал для многочисленных переменных

Question

У меня есть следующий код ниже ... Он берет поле поиска, быстро ищет в таблице подходящие элементы и скрывает все остальные результаты. Прямо сейчас этот код работает для одного поля поиска (с классом .search) и для одной таблицы (с идентификатором #SearchableTbl).

$(document).ready(function(){
    $('.search').on('keyup',function(){
        var searchTerm = $(this).val().toLowerCase();
        $('#SearchableTbl tbody tr').each(function(){
            var lineStr = $(this).text().toLowerCase();
            if(lineStr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

Я не знаю javascript, поэтому я не уверенкак заставить эту функцию работать для нескольких таблиц. Итак, если первое поле поиска было .search1 (а не только .search), а второе было .search2. И таблицы, которые искали, были # SearchableTbl1 и # SearchableTbl2 (соответственно).

Может ли кто-нибудь помочь мне изменить код, чтобы он работал со многими (не только 2) таблицами? Как я уже сказал, я не знаю javascript (но я немного знаю PHP), поэтому я пытаюсь сделать что-то вроде этого (ниже приведена смесь PHP и Javascript, которые определенно не будут работать, но должны получитьмоя точка зрения) ....

$(document).ready(function(){
 for($var=1; $var<10; $var++;) {  
   $('.search($var)').on('keyup',function(){
        var searchTerm = $(this).val().toLowerCase();
        $('#SearchableTbl($var) tbody tr').each(function(){
            var lineStr = $(this).text().toLowerCase();
            if(lineStr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
  }
});

Спасибо!

Answer 1

С jQuery это зависит от вашей структуры dom, поэтому оберните таблицу и поисковый ввод (или что-нибудь еще для этого компонента «таблица данных») в div, а затем простой факт, который вы вводите в конкретный ввод, который вы можете использоватьчтобы найти родительский элемент, тогда find() таблица.

$(document).ready(function(){
    $('.data-table input').on('keyup',function(){
       // find the parent
       var parent = $(this).closest('.data-table')

        var searchTerm = $(this).val().toLowerCase();

        $(parent).find('table tbody tr').each(function(){
            var lineStr = $(this).text().toLowerCase();
            if(lineStr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

<div class="data-table">
  <input type="text"/>

  <table>
   ...
  <table>
</div>