jQuery search through table rows, hidden and visible

Question

I've got a table where i display message history. By default the table displays only the last message between two people. But all of the messages are in the HTML code, just that they are set with display:none;

Im trying to make the search go through both visible and hidden tr rows.

What i currently have:

HTML:

            <table cellpadding="0" cellspacing="0" width="100%" class="tDefault mytasks" id="history">
                    <tr>
                        <td>Finish design</td>
                        <td align="center"><strong class="grey">0%</strong></td>
                    </tr>
                    <tr>
                        <td>Aquincum HTML code</td>
                        <td align="center"><strong class="green">89%</strong></td>
                    </tr>
                    <tr style="display:none;">
                        <td>Aquincum cpp code</td>
                        <td align="center"><strong class="green">99%</strong></td>
                    </tr>                            

                    <tr>
                        <td>Fix buggy css styles</td>
                        <td align="center"><strong class="red">16%</strong></td>
                    </tr>

            </table>

jQuery:

$("#search").keyup(function() {
    var value = this.value.toLowerCase().trim();

    $("#history tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

I have two problems:

1. For some reason the first tr is always visible even through it does not match the search. Try to search for buggy css. You'll see that the first tr is still there.

2. When i search for something, and then clear the search field. The second tr which is by default set to display:none; is visible. It has to somehow go back to a display:none state

jsfiddle:

http://jsfiddle.net/2T5yJ/

Answer 1

For first row index is zero. So its not reaching

        $(this).find("td").each(function () {

Remove

 if (!index) return;

And search filter would work correct

Update you can check if value="" and write logic to get back display of rows to original

Please check updated fiddle

FIDDLE