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

这是一个选择：

添加一个属性以标识要用于调用该函数的inputs，在我的示例中，我添加了属性data-filter="true"
启动脚本时，将侦听器添加到具有该属性的那些输入中，并使用<table>（Documentation）使其成为父项closest(...)
在函数中，请确保使用$(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(...)。

jQuery函数过滤器表多输入

1 个答案: