Higlight文本在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规则，我有像下面

​​

我想保持这个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看到它

只需外接U需要在奇数（TD，TH）类

，并添加不区分大小写 看到这个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;  
    }