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的链接，以使其更清晰并复制问题。

如果您键入文本，则可以看到它只会突出显示第2行中的文本，即奇数行。这是因为我喜欢下面的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

我更新了小提琴Jsfiddle看到它

只需在奇数（td，th）上添加你需要的类

并添加了Case-Insensitive 看到这个link 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;    
   }

突出显示html表中偶数行不起作用的文本

2 个答案: