1

では、 asCSSで奇数行の色を定義しましたが、 throughを更新しようとすると偶数行の更新に失敗します。jQuery コードは、行の色のみを更新します。table#eeebackground-colorjQueryodd

.etable tr:nth-of-type(odd) {
    background: #eee;
}

jQuery 呼び出し

$('#' + this.options.id).addClass("hover");

奇妙な行動の理由は何ですか？例が必要な場合は、お知らせください。

4

2 に答える 2

1

編集 #3 更新 (2013 年 7 月 31 日) ; http://jsfiddle.net/mEVK3/17/を参照

変更... JavaScriptを追加しました

    $('#table tr').click(function(){
        $(this).toggleClass('highlight');
    });

ハイライトと呼ばれるCSSクラスとともに

.etable tr.highlight {
   background-color: orange;
}

ホバーセレクター (:hover) も td 要素に作用するようになりました。透明な背景を使用して、行が強調表示され、選択されているように見えるようになりました。

.etable tr td:hover {
   background-color: rgba(30,100,30,0.4);
   cursor:pointer;
}

編集＃2（2013年7月30日はこれが目的ですか？ http://jsfiddle.net/mEVK3/12/

css の優先度が適切に機能するように、css の順序を並べ替えました。これがあなたがしようとしていることではない場合、最終結果がどのように見えるかについての仕様が必要になります。

編集＃1：私はあなたのために本当に奇妙な答えを持っています.CSSの優先順位とコードがCSSに追加される順序に関係しています!!!! 私の以前の回答では、偶数行の css スタイルによってインライン スタイルがオーバーライドされています。

これがあなたの望むものだと思います。 http://jsfiddle.net/mEVK3/5/

これはあなたが望まないものだと思います http://jsfiddle.net/mEVK3/4/

スクリプトを使用しました

 $('#table.etable tr').addClass("bluebackground");

bluebackground は単純なクラスです

コードの残りの部分は次のとおりです。

HTML

<table class="etable" id="table">
<tr><td>Some text</td></tr>  
    <tr><td>Some text 0</td></tr>  
    <tr><td>Some text 1</td></tr>  
    <tr><td>Some text 2</td></tr>  
    <tr><td>Some text 3</td></tr>  
    <tr><td>Some text 4</td></tr>  
    <tr><td>Some text 5</td></tr>  
    <tr><td>Some text 6</td></tr>  
    <tr><td>Some text 7</td></tr>  
    <tr><td>Some text 8</td></tr>  
    <tr><td>Some text 9</td></tr>  
</table>

CSS

.etable tr:nth-child(odd) {
 background: lightgrey;
}

.etable tr.bluebackground{
  background-color: lightblue;
}

.etable tr:hover {
  background: #f00;
} 

.etable tr.highlight{
   background-color: yellow;
}

Javascript

$('#table tr:eq(3)').addClass("highlight");

//change the background color in javascript
$('#table.etable tr').addClass("bluebackground");

スクリプトの最後の行をコメントアウトして、すべての行から背景を削除します。

私の心を吹き飛ばすのは、css の順序が重要であるということです。多くの

そうでなければならない

  1. n 番目の子の色 (偶数/奇数)

  2. カスタム背景 (これは後でスクリプトに追加されます)

  3. ホバー、これはカスタム背景の上にあるため

  4. ハイライト（これは残りの上にあるため）

CSS の順序は重要です。なぜなら、私が書いたスクリプトでは、CSS のすべてが同じ長さになっているからです。代わりに、ホバーとハイライトに特定性を追加して、常に上に表示されるようにすることもできます。次に、cssは次のようになります....

#table.etable tr:hover {
  background: #f00;
} 

table#table.etable tr.highlight{
   background-color: yellow;
}

それはハイライトにそれらすべての最高の優先度を与え、次にホバーしてから次に高い...

css の特異性と優先度、およびどのスタイルを適用するかを決定する方法については、http://designshack.net/articles/css/what-the-heck-is-css-specificity/を参照してください (ページの半分ほど下を見てください)。

于 2013-07-28T23:57:13.053 に答える
0

これが機能するフィドルですhttp://jsfiddle.net/kevinPHPkevin/mEVK3/<table>要素にIDが設定されていることを確認してください

于 2013-07-28T18:39:54.180 に答える