How to search a table using JS and return only the matching row?

Question

I have an HTML table that looks like below:

The actual table is really long, and I'd like to be able to search through the entries, and return just the matching results.

I'm currently using the following code for the search (from here):

var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

But there's a problem. When I search for Foo Bar, I want it to return:

Right now, it returns the following:

How can I fix this? Can this be done by adjusting the regex? I'm out of ideas.

Live Demo

Do you want only the `Foo Bar` to be searched, or all cells? — Mooseman, Dec 03 '14 at 11:51
@Jai: Yes, but is there some way this can be modified so that it returns the above result? — Joseph John, Dec 03 '14 at 11:53

score 4 · Accepted Answer · edited May 23 '17 at 12:26

Organize your table into multiple tbody groups (Yes, it's valid) and search within them.

var $rows = $('#table tbody');
$('#search').keyup(function () {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function () {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

body {
    padding: 20px;
}
input {
    margin-bottom: 5px;
    padding: 2px 3px;
    width: 209px;
}
td {
    padding: 4px;
    border: 1px #CCC solid;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search">
<table id="table" style="width: 100%" cellpadding="10">
    <tbody>
        <tr>
            <td rowspan="3">Foo Bar</td>
            <td>Roll No:</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3">Baz Bak</td>
            <td>Roll No:</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3">Baz Bar</td>
            <td>Roll No:</td>
            <td>something</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>something</td>
            <td>stuff</td>
        </tr>
    </tbody>
</table>

(If you prefer an updated version of your Fiddle: http://jsfiddle.net/9y89dcsp/1/)

very effective solution must be Accepted :) – CodeHunter Dec 03 '14 at 12:24 — CodeHunter, Dec 03 '14 at 12:24

score 0 · Answer 2 · edited Dec 03 '14 at 14:56

This is happening because you actually have a single row with Foo Bar in it. The table appears fine because rowspan takes care of it in the UI. But in DOM , only one row contains the "Foo Bar".

So what you can do is change your algorithm to search. You can call a function for every tr. Inside that function,

check your string
if it matches with the search string, store that row in a dummy table
go to next iteration
check if no of <td>s are 2 or less. If yes, append it in the dummy table
if the no of <td>s are 3, meaning you have reached next legitimate line. Stop this operation and display the dummy table in UI

How to search a table using JS and return only the matching row?

2 Answers2