javascript - 如何使用 jquery 在 html 表中搜索范围？

Question

我有一个这样的表结构:

City |    %age   | Year 
NY   | 57% - 95% | 2011
NY   | 30% - 65% | 2012
FL   | 50% - 60% | 2012
AL   | 10% - 50% | 2014

我可以使用这段代码在文本中进行搜索:

jQuery('#tblSearch tr td.td5:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').parent().show();

jQuery.expr[":"].containsNoCase = function (el, i, m) {
    var search = m[3];
    if (!search)
    return false;
    return eval("/" + search + "/i").test($(el).text());
};

但是我不知道如何搜索范围，比如如果用户想要搜索 60% 那么我怎样才能获得前三个结果？

提前致谢! 请引用是否可能重复。谢谢。

Answer 1

• jQuery filter()方法将在这里为您提供帮助。
• 首先您需要选择所有 TR有 TD 的元​​素(因为有些元素可以有 TH )，
• 在过滤函数中，您需要简单地使用 .match(/\d+/g) 从文本中提取最小值和最大值。返回如下内容:val === ["57", "95"] .作为字符串，您可以使用 unary + 轻松转换为数字接线员:+val[0] .
• .filter()的 return , 在检查您的输入值在 +val[0]<=v && +val[1]>v 范围内之后将 toggleClass 匹配的 TR 选择器。

var TR = $("#table").find("tr:has(td)");

function filterTable() {
  var v = +this.value; // The input value
  TR.filter(function(){
    var val = $(this).find("td:nth-child(2)").text().match(/\d+/g);
    return $(this).toggleClass("select", +val[0]<=v && +val[1]>v);
  });
}

$("#range").on("input", filterTable);

table td{border:1px solid #777;}
.select{background:gold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=table>
<tr><th>City </th><th>    %Age   </th><th> Year </th></tr>
<tr><td>NY   </td><td> 57% - 95% </td><td> 2011</td></tr>
<tr><td>NY   </td><td> 30% - 65% </td><td> 2012</td></tr>
<tr><td>FL   </td><td> 50% - 60% </td><td> 2012</td></tr>
<tr><td>AL   </td><td> 10% - 50% </td><td> 2014</td></tr>
</table>
  
Range: <input id=range type=number value=100 maxlength=3>%