CODEWITHSUNDEEP
jquery
user2430338
user2430338

Reputation: 89

Alternating row color except when cell already has a color in jquery

I have this code and it alternates row colors to grey and white:

$('tr:even').each(function(i){ $(this).find('td').css('background-color','white');});
$('tr:odd').each(function(i){ $(this).find('td').css('background-color','grey');});

except some cells are colored red. How do I make it so that the alternating rows of grey and white does not replace the red cells? The code above removes all red cells and replaces them with white or grey. Thank you.

Upvotes: 0

Views: 547

Answers (3)

Kevin B
Kevin B

Reputation: 95026

A class for odd or even rows (not both!) would make this easy.

$("tr").filter(":even").addClass("even");

css:

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

Styles set directly on elements will take precedence over what is in the stylesheet, so if your red css is set directly on the cell, it will override.

Upvotes: 0

dave
dave

Reputation: 64657

Why dont you just use css for all of it:

tr:even td {
    background-color: grey;
}
tr:odd td {
     background-color: white;
}
tr:even td.red, tr:odd td.red {
    background-color: red;
}

Old browser hack:

$(document).ready(function(){
  $('table tr:even').addClass('even');
  $('table tr:odd').addClass('odd');
});

tr.even td {
    background-color: grey;
}
tr.odd td {
     background-color: white;
}
tr.even td.red, tr.odd td.red {
    background-color: red;
}

If it's still not working, it sounds like inline styles are being applied from the other server, in which case, as much as I hate to use !important, I like it better than a slow jquery solution:

$(document).ready(function(){
  $('table tr:even').addClass('even');
  $('table tr:odd').addClass('odd');
});

tr.even td {
    background-color: grey !important;
}
tr.odd td {
     background-color: white !important;
}
tr.even td.red, tr.odd td.red {
    background-color: red !important;
}

Upvotes: 3

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

You can do using not() with a function parameter, like this:

var filter_red = function(){ return $(this).css('background-color') == 'rgb(255, 0, 0)'};
$('tr:even').not(filter_red).REST OF YOUR CODE..

Upvotes: 0

Related Questions