jquery table row selector based on user input

Question

How do I select rows depending on what's in an input box? Here's what I have so far:

<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btnFilter').keyup(function() {
        var myInput = $(this).val();
        $('tbody tr').hide();
        // I need to .show() all table rows that have a table cell with a value that begins with the input field.
        $('tr').something goes here.show();
    });
});
</script>
</head>
<body>
<form>
    <input id="btnFilter" name="btnFilter">
</form>
<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>X</td>
        </tr>
        <tr>
            <td>ABC</td>
            <td>D</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Not a direct answer, but if you are looking at a way to filter a table, have a look at datatables.net. It's in jQuery, uses your html table structure directly and support pagination, filtering, sorting and much more. It's a great plugin. — lpfavreau
– lpfavreau, Commented Oct 4, 2010 at 15:42

Nick Craver · Accepted Answer · 2010-10-04 15:36:49Z

1

If you want a search, :contains() is probably what you're after, for example:

$('tr:contains("' + myInput + '")').show();

You can try it out here, or a cell-begins-with only version:

$('td').filter(function() {
  return $.text([this]).indexOf(myInput) == 0
}).parent().show();

You can try that version here.

answered Oct 4, 2010 at 15:36

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phillip Senn Over a year ago

Zounds! Hey Nick! You're in W-S?! I'm in Hickory! How's the honeymoon?

Nick Craver Over a year ago

@cf_PhillipSenn - excellent :) trying to buy a house this week as well ;)

Praveen Prasad · Accepted Answer · 2010-10-04 15:44:53Z

1

$(document).ready(function() {
    $('#btnFilter').keyup(function() {
        var myInput = $(this).val();
        $('tbody tr').hide().find('td:contains("'+myInput+'")').parents('tr:first').show()
    });
});

answered Oct 4, 2010 at 15:44

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

Collectives™ on Stack Overflow

jquery table row selector based on user input

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related