JQuery функция фильтра таблицы мульти вход

Question

У меня есть этот скрипт для таблицы фильтров: (измените этот скрипт на функцию)

$(document).ready(function(){
  var $rows = $('tbody > tr'),
  $filters = $('#tableP input');
  $filters.on("keyup", function () {
    var $i = $filters.filter(function () {
        return $.trim(this.value).length > 0;
    }),
    len = $i.length;
    
    if (len === 0) return $rows.show();
    var cls = '.' + $i.map(function () {
        return this.className
    }).get().join(',.');
    
    $rows.hide().filter(function () {
        return $('td', this).filter(cls).filter(function() {
            var content = this.textContent.toLowerCase(),
                inputVal = $i.filter('.' + this.className).val().toLowerCase();
            return content.indexOf(inputVal) > -1;
        }).length === len;
    }).show();
  });  
}); 

<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>

<table id='tableP'>
  <thead> 
      <tr>
        <th>
            <input type='text' class="nome" placeholder="Nome.."/>
        </th>
        <th>
            <input type='text' class="cognome" placeholder="Cognome.." />
        </th>
        <th>
            <input type='text' class="citta" placeholder="Città.."  />
        </th>
      </tr> 
  </thead>
  <tbody>
    <tr>
      <td class='nome'>Carlo</td>
      <td class='cognome'>Grasso</td>
      <td class='citta'>Italia</td>
    </tr>
    <tr>
      <td class='nome'>Giuseppe</td>
      <td class='cognome'>Puglisi</td>
      <td class='citta'>Italia</td>
    </tr>
    <tr>
      <td class='nome'>Franc</td>
      <td class='cognome'>Justin</td>
      <td class='citta'>Francia</td>
    </tr>
  </tbody>
</table>

Это работает!Я хочу создать функцию для вызова во входном теге, я не знаю, как это сделать.Я хочу создать функцию для вызова во входном теге, я не знаю, как это сделать.

Я хочу создать функцию для ввода тега onkeyup myFilter(), как я могу это сделать?Кто-нибудь может мне помочь?

Answer 1

Вот вариант:

1. Добавьте свойство для определения inputs, которое вы хотите использовать для вызова функции, в моем примере я добавил свойство data-filter="true"

2. Когда вы запускаете ваш скрипт, добавьте слушатель к тем входам, которые имеют этот атрибут, и получите его родительский <table>, используя closest(...) ( Документация )

3. Внутри функции убедитесь, что вы нашли только элементы, которые являются потомками этой таблицы, используя $(table).find()

Вот и все, проверьте ниже, поможет ли это вам

$(document).ready(function(){

  $("input[data-filter='true']").on("keydown", function(){
    let parentTable = this.closest('.table-filtered');
    myTableFilter(parentTable);
  });  

  function myTableFilter(table){
    let $rows = $(table).find('tbody > tr');    
    let $filters = $(table).find('input');
    $filters.on("keyup", function () {
      var $i = $filters.filter(function () {
          return $.trim(this.value).length > 0;
      });
      var len = $i.length;
      
      if (len === 0) return $rows.show();
      var cls = '.' + $i.map(function () {
          return this.className;
      }).get().join(',.');
      
      $rows.hide().filter(function () {
          return $('td', this).filter(cls).filter(function() {
              var content = this.textContent.toLowerCase(),
                  inputVal = $i.filter('.' + this.className).val().toLowerCase();
              return content.indexOf(inputVal) > -1;
          }).length === len;
      }).show();
    }); 
  }
});

#tableP{
  border: 1px solid blue;
}

#tableP2{
  border: 1px solid red;
}

<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>

<table id='tableP' class="table-filtered">
  <thead> 
      <tr>
        <th>
            <input type='text' class="nome" placeholder="Nome.." data-filter="true"/>
        </th>
        <th>
            <input type='text' class="cognome" placeholder="Cognome.." data-filter="true"/>
        </th>
        <th>
            <input type='text' class="citta" placeholder="Città.."  data-filter="true"/>
        </th>
      </tr> 
  </thead>
  <tbody>
    <tr>
      <td class='nome'>Carlo</td>
      <td class='cognome'>Grasso</td>
      <td class='citta'>Italia</td>
    </tr>
    <tr>
      <td class='nome'>Giuseppe</td>
      <td class='cognome'>Puglisi</td>
      <td class='citta'>Italia</td>
    </tr>
    <tr>
      <td class='nome'>Franc</td>
      <td class='cognome'>Justin</td>
      <td class='citta'>Francia</td>
    </tr>
  </tbody>
</table>
<br>
<table id='tableP2' class="table-filtered">
  <thead> 
      <tr>
        <th>
            <input type='text' class="nome" placeholder="Nome.." data-filter="true"/>
        </th>
        <th>
            <input type='text' class="cognome" placeholder="Cognome.." data-filter="true" />
        </th>
        <th>
            <input type='text' class="citta" placeholder="Città.." data-filter="true" />
        </th>
      </tr> 
  </thead>
  <tbody>
    <tr>
      <td class='nome'>Sir</td>
      <td class='cognome'>Calvin</td>
      <td class='citta'>Brazil</td>
    </tr>
    <tr>
      <td class='nome'>Carlo</td>
      <td class='cognome'>Justin</td>
      <td class='citta'>Francia</td>
    </tr>
    <tr>
      <td class='nome'>Franc</td>
      <td class='cognome'>Grasso</td>
      <td class='citta'>Italia</td>
    </tr>
  </tbody>
</table>

По сути, я добавил эту часть:

$("input[data-filter='true']").on("keydown", function(){
    let parentTable = this.closest('.table-filtered');
    myTableFilter(parentTable);
 });

И внутри вашей функции я добавил $(table).find(...) там, где это было необходимо.