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()＆＃39; return，检查您的输入值在+val[0]<=v && +val[1]>v范围内 toggleClass 匹配的TR选择器。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

的 DEMO

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

3 个答案:

更新：定位表行