我正在尝试在用户在输入字段中键入时过滤所有表行。 过滤器基于用户通过类型为number的输入字段提供的宽度值。
所有输入字段均为最小值和最大值。
我要隐藏其输入字段不在用户指定范围内的所有行。
示例:
用户输入的宽度为210厘米。 只有一行包含一个输入字段,其中的min =“ 180”和max =“ 220” 除了该范围内的那一行,其他所有行均应隐藏。
这几乎对我有用,但是无论用户提供的宽度如何,只有第一行与用户输入匹配。
我想念什么?
谢谢!
我希望包含输入字段()不在给定范围内的所有其他行都被隐藏
$('input[name="user_width"]').on("keyup", function() {
user_width = parseInt($(this).val())
$(".product_types tr").filter(function() {
var min_value = parseInt($(this).find("input").attr('min'))
var max_value = parseInt($(this).find("input").attr('max'))
if (user_width > min_value && user_width < max_value) {
$(this).siblings().hide()
} else if (!user_width) {
$(this).siblings().show()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="user_width">
<table class="product_types">
<tbody>
<tr style="display: table-row;">
<td>
<input type="radio" min="0" max="100">
<span>row1</p>
</td>
</tr>
<tr style="display: table-row;">
<td>
<input type="radio" min="101" max="220">
<span>row2</p>
</td>
</tr>
<tr style="display: table-row;">
<td>
<input type="radio" min="221" max="290">
<span>row3</p>
</td>
</tr>
</tbody>
</table>