web-dev-qa-db-ja.com

jqueryを使用した代替行の色

CSSではなくjQueryを使用して、レコード間で行の色を変更することは可能ですか？もしそうなら、誰かがこれを達成する方法についての短いコードスクリプトを提供できますか？

jqueryrow
12
Oscar C

これを試して：

$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");
29
aknatn

クロスブラウザ（つまりIE）のサポートにCSSを使用したくないだけですか？もしそうなら、あなたはcould CSSでスタイルを維持し、jQueryを使用してクラスを設定します。

例えば：

<style>
    /* tr:nth-child(even) */
    tr.even { background-color: white; }
    /* tr:nth-child(odd) */
    tr.odd { background-color: black; }
</style>
<script>
    $(function(){
        // Apply to each table individually and make sure nothing is doubleclassed
        // if you run this multiples of times.
        $('table').each(function() {
            $('tr:odd',  this).addClass('odd').removeClass('even');
            $('tr:even', this).addClass('even').removeClass('odd');
        });
    });
</script>
8
Brian Nickel

テーブルからtr要素を選択でき、cssは関数をパラメーターとして受け入れます。これにより、決定したいくつかの基準に基づいて値が返されます。この場合、インデックスの均一性をテストできます。

$("#table tr").css("background-color", function(index) {
    return index%2==0?"blue":"red";
});

JSFiddle： http://jsfiddle.net/n3Zny/

3
Dennis

jQueryはSizzleSeletor Engineを使用します。これは、CSSと同じ構文を使用しているので便利です。したがって、CSSと同じセレクターを使用しますが、jQuery .css()関数を使用して要素のCSSを変更します。

_$('#table_id').find('tr:even').css({'background-color':'red'})
              .end().find('tr:odd').css({'background-color':'blue'});
_

このコード例では、変更するテーブルを選択し、すべての偶数の子要素（tr）を選択して背景色を変更し、.end()を使用して前の選択に戻ります。テーブル全体を選択し、奇数行を選択してCSSを変更します。

2
Jasper

非表示の行（または別の属性、たとえばclass="struck"）：

<style>
tr.struck{background-color:#633;color:white;}
tr.eee{background-color:#EEE;color:#000;}
tr.fff{background-color:#FFF;color:#000;}
</style>
function doZebra(){
     var tTrCnt=0;
     $("##tblData tbody tr").each(function(){
         if($(this).css("display")!="none" && !$(this).hasClass("struck")){
             tTrCnt++;
             if(tTrCnt % 2) $(this).removeClass().addClass("eee");
             else  $(this).removeClass().addClass("fff");
         }
     });
}
0
gordon

次のコードを使用して、代替行の色を変更しました。 http://www.tutsway.com/set-alternate-row-colors-in-jQuery.php から参照しました

window.jQuery(document).ready(function(){
       window.jQuery("tr:odd" ).css("background-color","#fbcff5" );
       window.jQuery("tr:even").css("background-color","#bbbbff");
    });
0
Manish