How to search a range in html table using jquery?

Question

I have a table structure like this:

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

I am able to search in the text using this code:

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

But I do not have any idea how can I search ranges like if user want to search for 60% then How can I get first three result?

Thanks in advance! Please refer if possible duplicate. Thanks.

How do you create that result? PHP? Why don't you add some `data-*` attribute to your elements like `57% - 95%`? Than you can easily filter your elements by `data-attribute`. — Roko C. Buljan, Jan 05 '15 at 19:06
@RokoC.Buljan I am not using any php just html and jquery with table. — mubashermubi, Jan 05 '15 at 19:07
Okay Let me do this I didnt think about it! Thanks @RokoC.Buljan — mubashermubi, Jan 05 '15 at 19:08

score 3 · Answer 1 · edited Jan 05 '15 at 20:25

jQuery filter() method will help you here.
First you need to select all TR elements that have TD (cause some can have TH),
than inside the filter function you need to extract the MIN and MAX values from the text using simply .match(/\d+/g) which returns something like: val === ["57", "95"]. Being strings you can convert easily to numbers using the unary + operator: +val[0].
the .filter()'s return, after checking your input value is in range +val[0]<=v && +val[1]>v will than toggleClass the matching TR selectors.

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

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

I rolled a number checker

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

You can use it like this:

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

Demo: http://jsfiddle.net/n8nu6mo4/3/

Also available as a one-liner:

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

Update: target the Table Row

See @Roko's comments

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

use like: (remove .closest("tr") to target only the TD elements)

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

Demo: http://jsfiddle.net/n8nu6mo4/9/

Also available as a one-liner:

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 05 '15 at 19:22

Mooseman

18,763
14
70
93

@RokoC.Buljan Fixed. Thanks for the bug report. – Mooseman Jan 05 '15 at 19:59
Good edit but now will simply fail if we remove a whitespace: http://jsfiddle.net/n8nu6mo4/4/ you should use `.match` and the resulting Array like I did. Bulletproof. – Roko C. Buljan Jan 05 '15 at 20:07
Added an example that uses TABLE (per-OP's-request) and a fix that prevents `null||undefined` issues: http://jsfiddle.net/n8nu6mo4/7/ – Roko C. Buljan Jan 05 '15 at 20:23
@Roko: I know, but I was only tidying up, not re-writing the answer entirely. Had I written it entirely from scratch, though, I would've gone with `String.match()`, and probably used a previous answer (http://stackoverflow.com/a/18881828/82548) for the range-check. – David Thomas Jan 05 '15 at 20:23
I created this fiddle I am trying to do search by combination of inputs here: http://jsfiddle.net/1mw86231/7/ – mubashermubi Jan 06 '15 at 17:50
Great I Marked your answer as accepted But I am try to do something more. – mubashermubi Jan 06 '15 at 17:52

charlietfl · Answer 3 · 2015-01-05T19:33:48.297

This shows all that value is within the range and hides others

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

Uses table as markup, subsequent calls make it reusable without any changes

DEMO

How to search a range in html table using jquery?

3 Answers3

Update: target the Table Row