Manipulating with CSS

Posted on 2011-10-20
Last Modified: 2012-05-12

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.

 Image of screen query.htm acclist.css
Question by:Michael
    LVL 10

    Expert Comment

    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.
    LVL 10

    Expert Comment

    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.
    LVL 25

    Accepted Solution

    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?
    LVL 10

    Expert Comment

    Good idea didn't think of using nth-child... just incase you get the go ahead:

    	  $(".acc tbody tr td:nth-child(9)").each(
    	  		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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Suggested Solutions

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now