Jquery Higlight文本不适用于html表中的偶数行

我有下面这样的桌子

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

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

这里是我的链接，以使其更清楚并复制问题

如果您键入文本，您可以看到它将只突出显示第二行（即奇数行）中的文本。这是因为我喜欢下面的css规则

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

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

我想保留这个css规则，但仍然想突出显示与文本匹配的行。我该怎么做呢？

您正受到CSS特性的影响-您的

tr:odd

样式中更具体的规则会覆盖您的

。searchResult

样式

您可以更改

.searchResult

样式，使其至少引用与

tr:odd

样式相同的匹配规则集合，例如：

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

这比

更具体。gridHover tbody tr:nth child（奇数）td

有了此规则，您还可以删除现有的

td.searchResult

规则，因为它包含在上述规则中。

您受到CSS特殊性的影响-您的

tr:odd

样式中更具体的规则会覆盖您的

。searchResult

样式

您可以更改

.searchResult

样式，使其至少引用与

tr:odd

样式相同的匹配规则集合，例如：

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

这比

更具体。gridHover tbody tr:nth child（奇数）td

有了此规则，您还可以删除现有的

td.searchResult

规则，因为它包含在上述规则中。

我看到了吗

只需在单数（td，th）上添加所需的类

并添加了不区分大小写的 看到这个了吗 js:

css:

我看到了

只需在单数（td，th）上添加所需的类

并添加了不区分大小写的 看到这个了吗 js:

css:

---

---

我不明白你的问题。它对所有细胞都正常工作。@Siamak.A.M请查看更新的fiddle我不理解您的问题。它对所有单元格都正常工作。@Siamak.A.M请查看更新的fiddle，我添加了内嵌css。见更新的小提琴。我现在给每个td添加了css。仍然不起作用。如果你知道如何使它工作，那么请你能更新我的小提琴。提前谢谢，看起来不错。也可以使搜索不区分大小写。现在你可以看到，如果你输入大写字母S，它只会亮起第一行。是否可以使其不区分大小写。希望你understand@RameshPatil那是另一个问题。询问（或搜索）另一个关于案例不敏感的问题。使用

！重要信息

也将解决此问题，而无需使规则更加具体。@Dave如何使用此功能！重要吗？我添加了内联css。见更新的小提琴。我现在给每个td添加了css。仍然不起作用。如果你知道如何使它工作，那么请你能更新我的小提琴。提前谢谢，看起来不错。也可以使搜索不区分大小写。现在你可以看到，如果你输入大写字母S，它只会亮起第一行。是否可以使其不区分大小写。希望你understand@RameshPatil那是另一个问题。询问（或搜索）另一个关于案例不敏感的问题。使用

！重要信息

也将解决此问题，而无需使规则更加具体。@Dave如何使用此功能！重要吗？看起来很棒。也可以使搜索不区分大小写。现在你可以看到，如果你输入大写字母S，它只会亮起第一行。是否可以使其不区分大小写。希望你能理解，这比实际需要的复杂多了。您只需要一个包含

.searchResult

的规则，该规则比任何其他规则都更具体。有了这条规则，一般的

td.searchResult

规则就没有必要了。@Alnitak不太明白你在这里的意思。@Ramespatil我想说的是，一条提到

.searchResult

的规则就足够了，而这个答案仍然包含一个（不正确的）一般规则和另一个非常具体的规则实际上过于具体。非常感谢马哈茂德。我希望我能提高投票率，但没有足够的声誉。这看起来很棒。也可以使搜索不区分大小写。现在你可以看到，如果你输入大写字母S，它只会亮起第一行。是否可以使其不区分大小写。希望你能理解，这比实际需要的复杂多了。您只需要一个包含

.searchResult

的规则，该规则比任何其他规则都更具体。有了这条规则，一般的

td.searchResult

规则就没有必要了。@Alnitak不太明白你在这里的意思。@Ramespatil我想说的是，一条提到

.searchResult

的规则就足够了，而这个答案仍然包含一个（不正确的）一般规则和另一个非常具体的规则实际上过于具体。非常感谢马哈茂德。我希望我能投票，但声望不够。