Higlight文本在HTML表

工作偶數行我有表像下面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>

我有文本框，我輸入文本，然後它突出在表中的文本。我的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規則，但仍想突出匹配的文本行。我應該如何去做呢？

來源

2013-05-12 Happy

我不會rstand你的問題。它對所有單元都工作正常。 – 2013-05-12 10:30:42

@ Siamak.A.M請參閱更新的小提琴http://jsfiddle.net/PPVcw/134/ – Happy 2013-05-12 10:34:01

受影響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-12 10:45:57 Alnitak

我添加了內聯css。查看更新的小提琴http://jsfiddle.net/PPVcw/137/。我現在每個td都添加了css。還是行不通。如果你知道如何使它工作，那麼請你可以更新我的小提琴。在此先感謝 – Happy 2013-05-12 11:02:00

@RameshPatil看到更新的答案和http://jsfiddle.net/alnitak/nJgWD/1/ – Alnitak 2013-05-12 11:08:14

這看起來不錯。也有可能使搜索不區分大小寫。現在你可以看到，如果你鍵入大寫字母S，那麼它只會將第一行重點顯示出來。是否有可能使其不區分大小寫？希望你明白 – Happy 2013-05-12 11:10:20

我更新撥弄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;  
    }

來源

2013-05-12 10:51:15

看起來不錯。也有可能使搜索不區分大小寫。現在你可以看到，如果你鍵入大寫字母S，那麼它只會將第一行重點顯示出來。是否有可能使其不區分大小寫？希望你能理解。 – Happy 2013-05-12 11:06:03

這比它需要更復雜。你只需要一個包含「.searchResult」的規則，它比任何其他規則都更具體。有了這個規則，通用的'td.searchResult'規則是不必要的。 – Alnitak 2013-05-12 11:11:12

@Alnitak Didnt完全明白你的意思。 – Happy 2013-05-12 11:14:50

Higlight文本在HTML表

回答

相關問題