如何使用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()方法将在这里为您提供帮助。
• 首先，您需要选择所有具有TD的TR元素（因为某些元素可以具有TH ），
• 而不是在过滤器函数内部，您只需使用.match(/\\d+/g)从文本中提取MIN和MAX值即可，返回的内容类似于： 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>% 

Answer 2

我打了一个数字检查器

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); };

---

更新：定位表行

查看@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 3

这表明所有值都在范围内，并且隐藏了其他值

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);

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

演示