如何使用 jquery 在 html table 中搜索范围？

Question

我有这样的 table 结构：

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.expr[":"].withinNum = function (el, i, m, num) {
    str = $(el).text();
    var min = parseInt(str, 10),
        max = parseInt(str.substr(-4), 10);
    return m[3] >= min && m[3] <= max;
};

你可以这样使用它：

$("li:withinNum(50)").addClass('bold');

演示：http://jsfiddle.net/n8nu6mo4/3/

也可用作单线：

jQuery.expr[":"].withinNum = function(el, i, m, num){ str = $(el).text(); return m[3] >= parseInt(str, 10) && m[3] <= parseInt(str.substr(-4), 10); };

更新：定位 Table 行

查看@Roko 的评论

jQuery.expr[":"].withinNum = function (el, i, m) {
    var v = $(el).text().match(/\d+/g)||'';
    return m[3] >= +v[0] && m[3] <= +v[1];
};

像这样使用：（删除.closest("tr")以仅针对TD元素）

$("td:withinNum(50)").closest("tr").addClass('gold');

演示：http://jsfiddle.net/n8nu6mo4/9/

也可用作单线：

jQuery.expr[":"].withinNum=function(e,i,m){var v=$(e).text().match(/\d+/g)||'';return m[3]>=+v[0]&&m[3]<=+v[1];};

Answer 2

这显示所有值都在范围内并隐藏其他值

function filterByPercentVal(val) {
    $('tbody tr').show().filter(function () {
        var rangeText = $.trim($(this).find('td').eq(1).text()).replace(/%|\s/g, ''),
            rangeLimits = rangeText.split('-');
        return !(val>= parseInt(rangeLimits[0], 10) && val<= parseInt(rangeLimits[1], 10));

    }).hide();
}
/* usage */
filterByPercentVal(55);

使用 table 作为标记，后续调用使其无需任何更改即可重用

DEMO

Answer 3

jQueryfilter()方法在这里可以帮到你。
首先你需要 select 所有 TR 有 TD 的元素（因为有些元素可以有 TH），
在过滤函数中，您需要使用简单的 .match(/\d+/g) 从文本中提取最小值和最大值，其中 returns 类似于：val === ["57", "95"]。作为字符串，您可以使用 unary + 运算符轻松转换为数字：+val[0]。
.filter() 的 return，在检查您的输入值在范围 +val[0]<=v && +val[1]>v 之后，将比 toggleClass 匹配的 TR select或

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>%

如何使用 jquery 在 html table 中搜索范围？

How to search a range in html table using jquery?

html

javascript

jquery

更新：定位 Table 行