2012-04-11 6 views
2

私はJavaScriptファイルでこの表現を持って除いて、代替行の色...それはokですすべての私のテーブルの行の色を、交互にjQueryの:「ノー代替色」クラス

$('tbody tr:even').addClass("alt-row"); 

。しかし、私はtrの "代替色"のような例外クラスを追加したいと思います。例えば

<table id="invoice"> 
    <tbody> 
    <tr class="headings"> 
    <th class="item first" style="padding-left:5px;">Unidad</th> 
    <th class="description">Descripcion</th> 
    <th class="price">Precio</th> 
    <th class="quantity">Cantidad</th> 
    <th class="linetotal last" style="padding-right:7px;">Total</th> 
    </tr> 
    <tr class="lineitem alt-row" style="border-bottom:1px solid #e5e5e5;"> 
    <td class="item_name_data" style="padding:2px 2px 2px 5px;">MacBook Pro 13"</td> 
    <td class="description">13-inch: 2.4 GHz 
2.4GHz dual-core 
Intel Core i5 
    </td> 
    <td class="price_data">1199.99</td> 
    <td class="quantity_data">2</td> 
    <td class="linetotal_data" style="padding-right:5px;">2399.98</td> 
    </tr> 
    <tr class="lineitem" style="border-bottom:1px solid #e5e5e5;"> 
    <td class="item_name_data" style="padding:2px 2px 2px 5px;">Muji Table</td> 
    <td class="description">awesome light brown table</td> 
    <td class="price_data">89.99</td> 
    <td class="quantity_data">1</td> 
    <td class="linetotal_data" style="padding-right:5px;">89.99</td> 
    </tr> 
</tbody> 
</table> 

、上記の表は、もともとTR年代に「ALT-行」クラスを持っていなかったが、それは、jQueryの機能により添加しました。

私はjQueryに慣れていません。どうすればそれを達成できますか?

+0

HTMLで説明してください。 –

+0

HTMLが追加されました。 – leonel

答えて

5

あなたは(あなたが達成しようとしているものに応じて)たい場合はあなただけではCSSでこれを行うことができます..この効果に何か..

http://jsfiddle.net/xENWM/1/

+0

これはさらに優れています! – MilkyWayJoe

+2

@milkywayjoe気付かなかった場合は、2つのアプローチの結果に若干の違いがあります。 jqueryの方法は、奇妙なものの計算から 'no-alt'行を完全に取り除き、何が偶数であるのか、CSSはクラスのevensをスキップします。それがあなたにとって重要であるかどうかを確かめるために、フィドルは差異を見てください。http://jsfiddle.net/xENWM/3/ –

+0

私はそこに小さなdiffがあることがわかりましたが、全体的に、私はこれのようなものを使うかもしれないので、私はCSSが好きです..両方の解決策は良いthoです – MilkyWayJoe

5
$('tbody tr:not(.no-alternate-color):even').addClass("alt-row"); 

http://jsfiddle.net/CKeew/

+0

これは簡単で、超簡単です – MilkyWayJoe

+4

クイック検索で参照を見つけることができませんでしたが、Internet Explorerの:notセレクタで重大なパフォーマンス問題が発生しています。もしあなたが問題であれば、代わりに.not関数を使ってみてください:$( 'tbody tr')。not( '。no-alternate-color')。filter( ':even')。addClass( 'alt-row' ) – Phil