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');
            }
        });
});

これは、より明確にして問題を再現するための私のフィドルへのリンクです。

テキストを入力すると、2 行目、つまり奇数行のテキストのみが強調表示されることがわかります。これは、私が以下のような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

Fiddle 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 に答える