I have two table on page and I am trying to give it zebra strip effect. It works fines but for second table tr taking count from first table. Due to this even tr bee the first tr.

Example of my work /

code I am using for this is below:

$('table tr:even:not(:first)').css('background-color','#ededed');

I have two table on page and I am trying to give it zebra strip effect. It works fines but for second table tr taking count from first table. Due to this even tr bee the first tr.

Example of my work http://jsfiddle/A9wpe/1/

code I am using for this is below:

$('table tr:even:not(:first)').css('background-color','#ededed');

• javascript
• jquery
• html

• see: stackoverflow./questions/15789526/… – ColinE Commented Jan 8, 2014 at 6:28

5 Answers 5

Could always iterate through each table, acting on each independently:

$('table').each(function(){$(this).find('tr:even').css('background-color','#ededed')});

Or, if your users have recent browsers, you'd do this in CSS:

table tr:nth-child(even) {background-color: #ededed;}

Don't use jQuery for this. Use CSS instead

DEMO

.subPro-data tr:nth-child(even){
    background-color : #ededed;
}

DEMO With jQuery for old IE

.subPro-data tr.even{
    background-color : #ededed;
}

and

$('.subPro-data tr:even').addClass('even');

Point is you want to avoid selectors like this $('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)'). Its a nightmare of inefficiency, and ultimately its so plicated only because you are using the following mand: .css('background-color','#ededed');

Using .css adds those styles to the inline style attribute on the dom element. http://www.w3schools./css/css_howto.asp inline styles override almost all css rules. What you should be doing is just adding a class instead. That way the background color lives in a css rule and will naturally be in the right location in the css cascade.

This also means you can use a simple and sane selector like this $('.subPro-data tr:even').

Give id for both table and use jQuery below:

$('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)').css('background-color','#ededed');

Replace table id with {tableID1} and {tableID2}. See JSFiddle example.

$('table').each(function(index, value) { $(value).find('tr:even:not(:first)').css('background-color','#ededed');});

You can filter rows using :not(:first) and then apply nth-child(odd) rule. check DEMO here

$('table tr:not(:first):nth-child(odd)').css('background-color','#ededed');