CODEWITHSUNDEEP
javascriptformatting
user2696565
user2696565

Reputation: 629

Table formatting based on cell content in Javascript

I have a table with text in left-most column and numbers in all other columns. How can I color the cells based on the number in them? I want to set the background-color = "red" for negative number and ignore the column with text in it and also ignore the cells with positive numbers in them.

Below is a code that I picked up from another question and modified a little bit but it does not seem to work. 

var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
    var node = allTableCells[i];
    var currentVal = node.childNodes[0].nodeValue; 
    if(currentVal.toFixed){
        if (currentVal <0)
            node.style.backgroundColor = "red"; // -ive number
    } else{
        // do nothing, the cell has text
    }
}

Upvotes: 0

Views: 465

Answers (1)

Julien Ch.
Julien Ch.

Reputation: 1261

You should parse the number:

var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
    var node = allTableCells[i];
    var currentVal = parseFloat(node.childNodes[0].nodeValue); 
    if(currentVal!=NaN){
        if (currentVal <0)
            node.style.backgroundColor = "red";
    } 
}

Or better with jQuery & css:

Script:

$("td").filter(function(c){
    var num=parseFloat(this.innerText);
    return num!=NaN && num < 0;
}).addClass("neg");

or

$("td:contains('-')").addClass("neg");

CSS: 

.neg{
    background-color: red;
}

Upvotes: 1

Related Questions