conditional formatting of html table cells

Question

Are there any out of the box solutions to have conditional formatting of HTML tables?

With conditional formatting I am more interested in having different colors as cell

Answer 1

My first take on this, given the following table structure:

<table>
    <col id="name" />
    <col id="score" />
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Allan, Paul</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Bartlett, James</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Callow, Simon</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Dennis, Mark</td>
            <td>19</td>
        </tr>
        <tr>
            <td>Ennals, Simon</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Finnegan, Seamus</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

css:

table {
    width: 20em;
}

#score {
    width: 50%;
}

#name {
    width: 50%;
}

th {
    border-bottom: 2px solid #000;
    padding: 0.5em 0 0.1em 0;
    font-size: 1.2em;
}

td {
    border-bottom: 2px solid #ccc;
    padding: 0.5em 0 0.1em 0;
}

th:nth-child(even),
td:nth-child(even) {
    text-align: center;
}

.vGood {
    background-color: #0f0;
}

.good {
    background-color: #0c0;
}

.avg {
    background-color: #060;
}

.poor {
    background-color: #c00;
}

.vPoor {
    background-color: #f00;
}

and jQuery:

$('tbody tr td:not(":first")').each(

function() {
    var vGood = 30,
        good = 25,
        avg = 20,
        poor = 15,
        vPoor = 10,
        score = $(this).text();

    if (score >= vGood) {
        $(this).addClass('vGood');
    }
    else if (score < vGood && score >= good) {
        $(this).addClass('good');
    }
    else if (score <good && score >= avg) {
        $(this).addClass('avg');
    }
    else if (score < avg&& score >= poor) {
        $(this).addClass('poor');
    }
    else if (score < poor) {
        $(this).addClass('vPoor');
    }
    });

JS Fiddle demo.

This is, of course, a brute-force approach. It'll work, but it's not the most optimised/efficient approach.

Answer 2

Maintain two variables for highest and lowest values in the table.

Add a function that gets called any time the table changes. Iterate through each cell and recalculate the highest and lowest values as necessary and then with an if statement (or something similar) reassign the correct color. For example, for each cell:

if(cellValue < minValue)
    minValue = cellValue;
else if(cellValue > maxValue)
    maxValue = cellValue;

var bracket = (cellValue - minValue) / (maxValue - minValue);

if(bracket < .2)
    // make the cell green
else if(bracket < .4)
    // make the cell green-yellow
else if(bracket < .6)
    // make the cell yellow

...and so on. This is very brute force though. You can probably find a way to optimize the process of reassigning colors to existing cells.

Answer 3

I have done similar to similar to what ZDYN and David propose but in a more mathematically proven way.

After my dynamic values are calculated I go around calculating percentiles for the columns that I want to color code using

(L/N)*100
where: L=> Number of Items less the value for which percentile is being calculated
N => Total number of items

Now, depending on the percentile I get from the above calculations, appropriate colors are assigned for use when displaying the table.
With this approach I get the flexibility of using different color palettes at different granularity levels as the need be.
For example I can use Red for percentile ranging from 0-5 in one case and 0-10 in another. All these parts can be flexibly coded for as all of the above steps are done @ backend. (in Java)

Answer 4

http://jsfiddle.net/stofke/Ya68Q/

      $(function() {
            $('tr > td:odd').each(function(index) {
                var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
                var score = $(this).text();
                for (var i = 0; i < scale.length; i++) {
                    if (score <= scale[i][1]) {
                        $(this).addClass(scale[i][0]);
                    }
                }
            });
       });

Answer 5

You could set up some css classes:

.row { background-color: #00ff00; }
.alt { backgorund-color: #ff00ff; }

<table>
    <tr class="row">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
    <tr class="alt">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
</table>

The jquery option is also simple, but this is how I would do it honestly.

HTH

Answer 6

You could use css and dynamically generate class names on the backend... so on the backend, you would add class="level1" (or "level2" or "level3" etc) based on the calculated value of the cell. Then you could control the display of those classes through simple css.