Set color of alternate row using jQuery?

Question

I am trying to use query to set color of alternate rows of a html table. But every time I add a new row query switches the color of the whole table. Here is the Javascript code I am using:

var alternate = true;
function addRow(data) {
    if(alternate){
        $("table.live_feed").find('tbody.main').prepend(data).css("background", "#f1f1f1");
        alternate = false;
    }else{
        $("table.live_feed").find('tbody.main').prepend(data).css("background", "white");
        alternate = true;
    }
}

PS: I looked as some similar questions on Stack Overflow where they change the color of odd or even rows. I do not want to change the color of rows that are already present, I only want to change the color of new rows being added.

possible duplicate of [Alternate row coloring in jquery](http://stackoverflow.com/questions/979669/alternate-row-coloring-in-jquery) — Kredns, May 12 '11 at 20:37
You might find it easiest to add a class to those newly-added rows `class="new"` (for example), and use a selector such as `$('tr.new:nth-child(odd)')` to target the odd rows of those newly-added rows. — David Thomas, May 12 '11 at 20:37
Why do you only want to consider "new rows"? Surely all rows in the table have the zebra striping? It's just making it more complicated to only consider new rows. — thirtydot, May 12 '11 at 20:39
What is `data`? Does it have any `id` or `class` to it that you could do a `.css('background-color', 'yourColor')` to? Also try using `background-color` if your just changing the color — Soatl, May 12 '11 at 20:39
@thirtydot - if I change color of odd/even rows instead of only new rows, then whenever a new row is added all the rows will switch color because adding a new row will make all odd rows even and all even rows odd. — Ansh, May 12 '11 at 21:14
@Ansh: I see. There are still more elegant ways of solving this, but there's only any point in implementing a better way if you can also *delete* rows. If you're not deleting, what you have will work fine. If you are deleting, you can kludge around it (again) or implement something better. — thirtydot, May 12 '11 at 21:27
Just take the same selector as posted above: `tr:nth-child(odd) { background-color: grey; }` — Felix Kling, May 12 '11 at 22:05

score 5 · Accepted Answer · answered May 12 '11 at 20:39

Your .css is acting on the found item (tbody.main), instead you want it to act on data:

var data = $(data).css("background", "#f1f1f1");
$("table.live_feed").find('tbody.main').prepend(data);

As a side note, for alternating row colours you can utilise the selectors :odd and :even

Example:

$('tr:odd').css('background', 'lightgray');

marcosfromero · Answer 2 · 2011-05-12T20:45:51.703

prepend and append and other DOM insertion methods don't return the just created elements, but the jQuery object where you called them. In your code, the css call is applied to the tbody.main jQuery object.

In this example you can see how the returned element of the append call is the div element with test id.

http://jsfiddle.net/marcosfromero/VUrhZ/

In the same example you can see a workaround to apply css to the just inserted element using first() after prepend.

Set color of alternate row using jQuery?

2 Answers2