高亮文本不工作，甚至行在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');
            }
        });
});

这里是我的小提琴的链接，使它更清楚和复制问题。

如果你输入文本，你可以看到它只会突出显示第二行即奇数行的文本。这是因为我在

下面有一个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规则，因为它被上面的规则覆盖。

Answer 2

我更新了小提琴

只添加你需要的类奇数(td,th)

并增加了不区分大小写请看这个链接js:

 jQuery.expr[':'].Contains = function(a, i, m) {
         return jQuery(a).text().toUpperCase()
             .indexOf(m[3].toUpperCase()) >= 0;
       };
       jQuery.expr[':'].contains = function(a, i, m) {
         return jQuery(a).text().toUpperCase()
             .indexOf(m[3].toUpperCase()) >= 0;
       };

css:

td {
border: 1px solid #000;
padding: 0.4em 1em;
}
td.searchResult {
background-color: #ffa;
 }

.gridHover tbody {
 cursor: default;
 }
.gridHover tbody tr:hover td,.gridHover tbody tr:hover th {
 background-color: #fafad2;
 }

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