javascript - Jquery过滤表是否适合输入范围
问题描述
问题:
我有一个带有类型编号的 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 创建范围,然后让价格列摆脱 $ 并检查它是否在范围内,如果不使用上面的代码隐藏。
更新:
我添加了
$(this).closest('tr').removeClass('discarded').show();
} else {
$(this).closest('tr').addClass('discarded').hide();
}
但是,这没有显示任何内容,因为我不检查丢弃的行,如果我删除对丢弃行的检查,它不会将我的搜索应用于范围不确定是否有一种简单的方法可以同时拥有这两者,但它似乎没问题此时此刻
如果您需要更多信息,请询问。
谢谢
解决方案
您可以使用它,您只需要迭代并获取值然后检查,基于此您可以隐藏和显示。
$("#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>
推荐阅读
- apache-kafka - Kafka 流仅在收到第一个确认时才使用下一条消息
- php - 从 Woocommerce 的产品库中获取第一张图片的 URL
- qt - Qt QProcess间歇性读取标准输出失败
- regex - 如何在python中使用正则表达式从csv文件中获取数据
- validation - 保存实体之前进行 cakephp3 验证
- types - 在不使用包的情况下输入端口声明 VHDL
- python - Python中的统计数据
- bash - anaconda 安装,火炬激活:没有这样的文件或目录
- javascript - this 指的是 javascript 上的内部函数
- html - 使用react app的get方法在材质UI表中显示数据