Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 164
  • Last Modified:

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
 Image of screen query.htm acclist.css
0
Michael
Asked:
Michael
  • 3
1 Solution
 
gavsmithCommented:
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.
0
 
gavsmithCommented:
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.
0
 
Kyle HamiltonData ScientistCommented:
The table does have an id and a class, so you can access the td you're trying to manipulate using eq, or nth-child.

The problem is you need to add the JS (or a link to it and the jquery lib) to the source code. Will they allow you to do that?
0
 
gavsmithCommented:
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');
			}
	  	});
	});

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now