CODEWITHSUNDEEP
jqueryrow
Oscar C
Oscar C

Reputation: 168

alternate row colors using jquery

Using jQuery and not CSS, is it possible to alternate row colors between records? If so can anyone provide a short code script on how to accomplish this?

Upvotes: 14

Views: 40506

Answers (6)

Brian Nickel
Brian Nickel

Reputation: 27550

Do you just not want to use CSS for cross-browser (i.e., IE) support? If so, you could keep the styling in the CSS and just use jQuery to set the class.

For example:

<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>

Upvotes: 9

gordon
gordon

Reputation: 1182

For anyone wanting to skip over hidden rows (or another attribute, say 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");
         }
     });
}

Upvotes: 0

Manish
Manish

Reputation: 328

I used following code to change color of alternate row. I have taken reference from 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");
    });

Upvotes: 0

Dennis
Dennis

Reputation: 32598

You can select tr elements from a table and css accepts a function as a parameter, which will return a value based on some criteria you decide. In this case, you can test the index for evenness.

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

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

Upvotes: 4

Jasper
Jasper

Reputation: 76003

jQuery uses the Sizzle Seletor Engine, which is cool because it uses the same syntax as CSS. So you use the same selector as CSS but then use the jQuery .css() function to alter the elemen't CSS:

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

This code example selects the table you want to alter, then selects all the even child elements (tr's) and changes their background color, it then uses .end() to return to the previous selection of the entire table and selects the odd rows to alter their CSS.

Upvotes: 2

aknatn
aknatn

Reputation: 673

Try this: 

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

Upvotes: 31

Related Questions