1

我有如下表

<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 规则，但仍然想突出显示与文本匹配的行。我该怎么做？

4

2 回答 2

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规则，因为它已包含在上述规则中。

于 2013-05-12T10:45:57.917 回答
0

我更新了小提琴Jsfiddle看到它

只需在奇数（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;    
   }
于 2013-05-12T10:51:15.787 回答