根据输入间隔过滤表行

时间:2019-07-05 15:38:09

标签: jquery

我正在尝试在用户在输入字段中键入时过滤所有表行。 过滤器基于用户通过类型为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>

0 个答案:

没有答案