忽略jquery搜索中隐藏的表行

Question

我有一个包含两列的表，每列都有一个范围搜索

https://jsfiddle.net/8srq89ps/

我希望搜索忽略隐藏的行，例如，如果我搜索第一列的范围，搜索第二列忽略第一次搜索的隐藏行。

我设法通过tr:not(:hidden)做到这一点

https://jsfiddle.net/8srq89ps/

问题是当我清空搜索框时，隐藏的行保持隐藏状态 我不知道我做错了什么

编辑： 继承人守则：

$('#FATMin, #FATMax').keyup(function () {
    var min = parseInt($('#FATMin').val(), 10);
    var max = parseInt($('#FATMax').val(), 10);
    $('#mytable tbody tr:not(:hidden)').each(function () {
        var fat = parseFloat($('td:eq(1)', this).text()) || 0;
        if ((isNaN(min) && isNaN(max)) ||
            (isNaN(min) && fat <= max) ||
            (min <= fat && isNaN(max)) ||
            (min <= fat && fat <= max)) {
            $(this).show();

        } else {
            $(this).hide();
        }
    });
});

Answer 1

您应该在单个事件处理程序中显示已过滤的行，该处理程序根据不同的条件过滤行

$('#ICCMin, #ICCMax, #FATMin, #FATMax').keyup(function() {
  var min = parseInt($('#ICCMin').val(), 10),
    max = parseInt($('#ICCMax').val(), 10);

  //Cache rows in a variable
  var rows = $('#mytable tbody tr');

  //Get filtered rows based on first column
  var filtered = rows.filter(function() {
    var icc = parseFloat($('td:eq(0)', this).text()) || 0;
    return ((isNaN(min) && isNaN(max)) ||
      (isNaN(min) && icc <= max) ||
      (min <= icc && isNaN(max)) ||
      (min <= icc && icc <= max));
  });

  min = parseInt($('#FATMin').val(), 10);
  max = parseInt($('#FATMax').val(), 10);

  //Get filtered rows based on second column
  filtered = filtered.filter(function() {
    var fat = parseFloat($('td:eq(1)', this).text()) || 0;
    return (isNaN(min) && isNaN(max)) ||
      (isNaN(min) && fat <= max) ||
      (min <= fat && isNaN(max)) ||
      (min <= fat && fat <= max)
  });

  //Hide all rows
  rows.not(filtered).hide();

  //Show filtered row
  filtered.show()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ICCMin" placeholder="ICCMin">
<input type="text" id="ICCMax" placeholder="ICCMax">
<br/>
<input type="text" id="FATMin" placeholder="FATMin">
<input type="text" id="FATMax" placeholder="FATMax">
<table id="mytable">
  <thead>
    <tr>
      <th>ICC</th>
      <th>FAT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>106</td>
      <td>16</td>
    </tr>
    <tr>
      <td>112</td>
      <td>18</td>
    </tr>
    <tr>
      <td>120</td>
      <td>22</td>
    </tr>
    <tr>
      <td>128</td>
      <td>26</td>
    </tr>
    <tr>
      <td>136</td>
      <td>32</td>
    </tr>
    <tr>
      <td>138</td>
      <td>36</td>
    </tr>
    <tr>
      <td>145</td>
      <td>39</td>
    </tr>
    <tr>
      <td>156</td>
      <td>45</td>
    </tr>
    <tr>
      <td>168</td>
      <td>53</td>
    </tr>
  </tbody>
</table>