CODEWITHSUNDEEP
cssjquery
Sravanti
Sravanti

Reputation: 1407

How to highlight selected rows in table grid when searchtext matching using jquery?

Displaying row values in table grid. whenever user seraching particular record then i need to check that text matching with any of the rows.if matched the record need to change the background color of the row.if not matched need to display the original color of the grid rows.

please check my code how to display the original color if records are if records are not matched.?

$(function () {
        grid = $('#userGrid');

        // handle search fields key up event
        $('#search-term').keyup(function (e) {
            text = $(this).val(); // grab search term

            if (text.length > 1) {
               // grid.find('tr:has(td)').hide(); // hide data rows, leave header row showing

                // iterate through all grid rows
                grid.find('tr').each(function (i) {
                    // check to see if search term matches Name column
                    if ($(this).find('td:first-child').text().toUpperCase().match(text.toUpperCase()))
                        $(this).css({ background: "#FC6" }); 
                      //  $(this).show(); // show matching row
                });
            }
            else
                grid.find('tr').show(); // if no matching name is found, show all rows
        });
    });

Design :

<label for="search-term">Search by Name</label>
<input type="text" id="search-term" />
    <table id="userGrid">
    <th>
        <td>Name</td>
        <td>Email</td>
    </th>
    <tr>
        <td>John Smith</td>
        <td>[email protected]</td>
    </tr>
    <tr>
        <td>Sally Sue</td>
        <td>[email protected]</td>
    </tr>
</table>

Upvotes: 1

Views: 800

Answers (1)

mehdi
mehdi

Reputation: 1755

just add this line to your code : see DEMO

grid.find('tr').each(function (i) {
   $(this).css({ background: "#FFF" });//  <= this line
   // check to see if search term matches Name column
   if ($(this).find('td:first-child').text().toUpperCase().match(text.toUpperCase()))
           $(this).css({ background: "#FC6" }); 
        //  $(this).show(); // show matching row
 });

Upvotes: 2

Related Questions