jQuery过滤器表是否适合输入范围

Question

问题：

我有一个类型号为HTML的HTML，我想使用jQuery生成该值，方法是在任一侧添加10％，然后检查每一行是否落入该范围内（如果不隐藏该行的话）。

代码：

HTML

<input type="number" id="myPrice" onkeyup="myPriceFunction()" placeholder="Enter amount.." title="Type in a amount" min="0">

JavaScript / jQuery

$(document).ready(function(){
  $("#myPrice").on("keyup", function() {
       priceLow = $(this).val() * 0.9;
       priceHigh = $(this).val() * 1.1;
  });
}); 

JS小提琴

https://jsfiddle.net/nx30zqjd/7/

其他：

我正在使用：

.addClass('discarded').hide();

.removeClass('discarded').show();

隐藏和显示行

预期结果：

我希望使用priceLow和priceHigh创建范围，然后使price列摆脱$，并检查它是否在范围内（如果不使用上面的代码隐藏的话）。

更新：

我添加了

    $(this).closest('tr').removeClass('discarded').show();
  } else {
    $(this).closest('tr').addClass('discarded').hide();
  }

但是这什么都不显示，因为我不检查废弃的行，如果我删除对废弃的行的检查，则不会将我的搜索应用于范围，不确定是否有一种简便的方法可以将两者都包含在内，但似乎暂时没事

如果您需要更多信息，请询问。

谢谢

Answer 1

您可以使用它，您只需要迭代并获取值，然后根据您可以隐藏和显示的内容进行检查。

$("#myPrice").on("keyup", function() {
    if ($(this).val() === '') {
      $("#myTable tr").show();
      return;
    }
    priceLow = $(this).val() * 0.9;
    priceHigh = $(this).val() * 1.1;
    $("#myTable tr td:nth-child(2)").each(function(e) {
      var value = this.textContent.replace('$', '');
      if (value >= priceLow && value <= priceHigh) {
        $(this).closest('tr').show();
      } else {
        $(this).closest('tr').hide();
      }
    })
  });

$(document).ready(function() {

});
$(document).ready(function() {
  $("#myPrice").on("keyup", function() {
    if ($(this).val() === '') {
      $("#myTable tr").show();
      return;
    }
    priceLow = $(this).val() * 0.9;
    priceHigh = $(this).val() * 1.1;
    $("#myTable tr td:nth-child(2)").each(function(e) {
      var value = parseFloat(this.textContent.replace('$', ''));
      if (value >= priceLow && value <= priceHigh) {      
        $(this).closest('tr').removeClass('discarded').show();        
      } else {
        $(this).closest('tr').addClass('discarded').hide();        
      }
    })
  });
});

<style>* {
  box-sizing: border-box;
}

#mySearch {
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

.show {
  display: block;
}

a {
  color: blue;
  text-decoration: none;
  /* no underline */
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>CPUs</h2>
<a href="index.php">CPU</a>
<a href="mobo.php">Motherboards</a>
<input type="number" id="myPrice"  placeholder="Enter amount.." title="Type in a amount" min="0">
<input type="text" id="mySearch"  placeholder="Search for cpus.." title="Type in a cpu name">

<table id='myTable'>
  <thead>
    <tr>
      <th>CPU</th>
      <th>Price</th>
      <th>Mark</th>
      <th>Value</th>
      <th>Socket</th>
      <th>Image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href='mobo.php?cpu_name=AMD Ryzen 5 2600"' target='_blank'>AMD Ryzen 5 2600</a></td>
      <td>$246.05</td>
      <td>13537</td>
      <td>55.02</td>
      <td>AM4</td>
      <td><img src=NA height='42' width='42'></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td><a href='mobo.php?cpu_name=Intel Core i7-8700K"' target='_blank'>Intel Core i7-8700K</a></td>
      <td>$585.90</td>
      <td>15957</td>
      <td>27.24</td>
      <td>LGA1151</td>
      <td><img src=". $row[" url "]." height='42' width='42'></td>
    </tr>
  </tbody>
</table>