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. 当您启动脚本时，将侦听器添加到具有该属性的那些输入中，并使用 closest(...) (Documentation) 获取其父级 <table>

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(...)。