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

我有这样一个表结构：

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

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

我可以使用以下代码在文本中搜索：

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%，那个么如何才能得到前三个结果

提前谢谢！

---

如有可能，请参阅副本。谢谢

我滚动了一个数字检查器

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

演示：

也可作为一个班轮：

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

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

演示：

也可作为一个班轮：

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

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

演示：

也可作为一个班轮：

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

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

演示：

也可作为一个班轮：

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

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

---

这将显示该范围内的所有值，并隐藏其他值

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

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

---

这将显示该范围内的所有值，并隐藏其他值

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

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

jqueryfilter方法将在这里帮助您。 首先，您需要选择所有具有TD的TR元素，因为有些元素可能具有TH， 而在filter函数中，您需要使用simply.match/\d+/g从文本中提取最小值和最大值，该函数返回如下内容：val==[57,95]。作为字符串，您可以使用一元+运算符：+val[0]轻松地将其转换为数字。 在检查输入值是否在范围+val[0]v后，.filter的返回值将切换匹配的TR选择器。 var TR=$table.findtr:hastd； 函数过滤器表{ var v=+this.value；//输入值 过滤函数{ var val=$this.findtd:nth-child2.text.match/\d+/g； 返回$this.toggleClassselect，+val[0]v； }; } $range.oninput，filterTable； 表td{border:1px solid 777；} .选择{背景：金色；} 城市年龄百分比年 2011年纽约州57%-95% 2012年纽约州30%-65% 2012年佛罗里达州50%-60% 2014年10%-50% 范围：% jqueryfilter方法将在这里帮助您。 首先，您需要选择所有具有TD的TR元素，因为有些元素可能具有TH， 而在filter函数中，您需要使用simply.match/\d+/g从文本中提取最小值和最大值，该函数返回如下内容：val==[57,95]。作为字符串，您可以使用一元+运算符：+val[0]轻松地将其转换为数字。 在检查输入值是否在范围+val[0]v后，.filter的返回值将切换匹配的TR选择器。 var TR=$table.findtr:hastd； 函数过滤器表{ var v=+this.value；//输入值 过滤函数{ var val=$this.findtd:nth-child2.text.match/\d+/g； 返回$this.toggleClassselect，+val[0]v； }; } $range.oninput，filterTable； 表td{border:1px solid 777；} .选择{背景：金色；} 城市年龄百分比年 2011年纽约州57%-95% 2012年纽约州30%-65% 2012年佛罗里达州50%-60% 2014年10%-50%

---

---

范围：%s如何创建该结果？PHP？为什么不给元素添加一些数据-*属性，比如57%-95%？您可以通过data-attribute轻松过滤元素。@RokoC.Buljan我不使用任何php，只使用html和jquery与表一起使用。好吧，让我这样做吧，我没想过！谢谢@RokoC.BuljanYes表是手动创建的。您如何创建该结果？PHP？为什么不给元素添加一些数据-*属性，比如57%-95%？您可以通过data-attribute轻松过滤元素。@RokoC.Buljan我不使用任何php，只使用html和jquery与表一起使用。好吧，让我这样做吧，我没想过！谢谢@RokoC.BuljanYes表是手动创建的。@RokoC.Buljan已修复。谢谢你的bug报告。编辑得很好，但是如果我们删除一个空格，现在就会失败：你应该像我一样使用.match和结果数组。防弹。添加了一个使用每个OP的请求表的示例和一个防止null | |未定义问题的修复：@Roko:我知道，但我只是在整理，没有完全重新编写答案。如果我完全从头开始写的话，我会使用String.match，并且可能会使用以前的答案进行范围检查。我创建了这个小提琴，我正在尝试通过这里的输入组合进行搜索：@RokoC.Buljan Fixed。谢谢你的bug报告。编辑得很好，但是如果我们删除一个空格，现在就会失败：你应该像我一样使用.match和结果数组。防弹。添加了一个使用每个OP的请求表的示例和一个防止null | |未定义问题的修复：@Roko:我知道，但我只是在整理，没有完全重新编写答案。如果我完全从头开始写的话，我会选择String.match，并且可能会使用以前的答案进行范围检查。我创建了这个小提琴，我正在尝试通过组合输入进行搜索：