jquery - 突出显示文本不适用于 html 表中的偶数行

Question

我有如下表格

<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>

我有一个文本框，我可以在其中输入文本，然后它会突出显示表格中的文本。我的 jquery 代码如下所示

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

这是我的 fiddle 的链接使其更清晰并重现问题。

如果您键入文本，您会看到它只会突出显示第二行中的文本，即奇数行。这是因为我有如下的 css 规则

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

我想保留此 css 规则，但仍想突出显示与文本匹配的行。我该怎么办？

Answer 1

您受到 CSS 特异性的影响 - tr:odd 样式中更具体的规则会覆盖您的 .searchResult 样式。

您可以更改您的 .searchResult 样式，以便它也至少引用与 tr:odd 样式相同的一组匹配规则，例如:

.gridHover tbody tr td.searchResult {
        background-color: #ffa;
}

这比 .gridHover tbody tr:nth-child(odd) td 更具体。

有了这个规则，您还可以删除现有的 td.searchResult 规则，因为它已被上述规则覆盖。