Michael
asked on
Manipulating with CSS
I am managing an application from a vendor which is very strict about customisation. My business team has asked for a simple requirment which has been rejected by the vendor however they did say if we wanted to modify the CSS ourselves we are welcome to do so. I don't have a lot of experiece with CSS so really need some help. i have attached a jpg of how the screen looks (query.jpg) the business wants the column called results to have a different back colour depending on it's value. If it is a negative number then it should be Red, If it is between 0 and 10 it should be yellow, 111 and above should be green.
I have attached also source generated from my browser (query.html) for the screen in the image. i have also attached the stylesheet used currently on that screen. (Acclist.css)
Any help appreciated.
Regards
query.htm acclist.css
gavsmith
You can not do what you want purely in css, the markup would need a different class on the column's cell depending on having a positive or negative value. Which it currently doesn't have. It would be fairly simple using css and a jquery function, but if you can't modify it to add a jquery function you won't be able to do it without the vendor making changes.
Actually even with jquery you would still need a common selector for the cell, which you would only get by modifying the source code that creates the table, which I imagine is the vendors responsability.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Good idea didn't think of using nth-child... just incase you get the go ahead:
$(document).ready(function(){
$(".acc tbody tr td:nth-child(9)").each(
function(){
if (parseInt($(this).text()) < 0){
$(this).css('background', 'red');
}
else if (parseInt($(this).text()) >= 0 && parseInt($(this).text()) < 11){
$(this).css('background', 'yellow');
}
else if (parseInt($(this).text()) >= 11){
$(this).css('background', 'green');
}
});
});