I have table like below

```
<table class = "gridHover">
<thead>
    <tr>
        <td colspan="2">
            <label for="searchbox">Search:</label>
            <input type="text" id="searchbox" />
        </td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Something</td>
        <td>More text</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>blah?</td>
    </tr>
     <tr>
        <td>Test ipsum</td>
        <td>Test?</td>
    </tr>
</tbody>

```

I have text box where i enter text and then it highlights the text in table. My jquery code is as below

```
$(document).ready(
function(){
    $('#searchbox').keyup(
        function(){
            var searchText = $(this).val();
            if (searchText.length > 0){
                $('td:contains(' + searchText +')')
                    .addClass('searchResult'); 
                $('td:not(:contains('+searchText+'))')
                    .removeClass('searchResult');
            }
            else if (searchText.length == 0) {
                $('td.searchResult')
                    .removeClass('searchResult');
            }
        });
});

```

Here is link to my [fiddle](http://jsfiddle.net/PPVcw/134/) to make it more clear and replicate problem.

If you type the text you can see that it will only highlight text in 2nd row i.e odd rows. This is because of the css rule i have like below

```
 .gridHover tbody tr:nth-child(odd) td, .gridHover tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;

```

I want to keep this css rule but still want to highlight the rows matching the text. How should i go about it?