Question

在表格中显示行值。每当用户搜索特定记录时，我需要检查与任何行匹配的文本。如果匹配记录，则需要更改行的背景颜色。如果不匹配则需要显示网格行的原始颜色。

如果记录不匹配，请检查我的代码如何显示原始颜色。？

$(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
        });
    });

设计：

<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>john.smith@johnsmith.com</td>
    </tr>
    <tr>
        <td>Sally Sue</td>
        <td>sally.sue@sallysue.com</td>
    </tr>
</table>

Answer 1

只需将此行添加到您的代码中：参见 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
 });

当使用jquery进行searchtext匹配时，如何突出显示表格中的选定行？

1 个答案: