conditional formatting for html table varies by column

Question

I am trying to modify code I found here:

conditional formatting of html table cells

I have two different sets of formatting rules. There will be 37 columns in the final table. Most will be formatted with rule 1, about 10 will be formatted by rule 2.

Here is a jsfiddle with my work so far:

http://jsfiddle.net/8ed89exs/3/

here is the code:

html

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>0.1</th>
        <th>0.2</th>
        <th>0.3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Allan, Paul</td>
        <td>-9</td>
        <td>-9</td>
        <td>-9</td>
    </tr>
    <tr>
        <td>Bartlett, James</td>
        <td>-5</td>
        <td>-5</td>
        <td>-5</td>
    </tr>
    <tr>
        <td>Callow, Simon</td>
        <td>-2</td>
        <td>-2</td>
        <td>-2</td>
    </tr>
    <tr>
        <td>Dennis, Mark</td>
        <td>-1</td>
        <td>-1</td>
        <td>-1</td>
    </tr>
    <tr>
        <td>Ennals, Simon</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Finnegan, Seamus</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Goldberg, John</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
    </tr>
</tbody>

css

table {
    width: 13em;
}


th {
    border-bottom: 2px solid #ccc;
    padding: 0.1em 0 0.0em 0;
    font-size: .9em;
}

td {
    border-bottom: 0px solid #ccc;
    padding: 0.1em 0 0.1em 0;
    text-align: center;
}


.abovePlus {
    background-color: #1b7837; color: #fff;
}

.above {
    background-color: #7fbf7b; color: #000;
}

.high {
    background-color: #d9f0d3; color: #000;
}

.at {
    background-color: #ffffff; color: #000;
}

.low {
    background-color: #e7d4e8; color: #000;
}

.below {
    background-color: #af8dc3; color: #000;
}

.belowPlus {
    background-color: #762a83; color: #fff;
}

js

$(function() {
$( "td" ).each(function(index) {
    var scale = [['abovePlus', 20, 20], ['above', 5, 6], ['high', 2, 1], ['at', 0, 0], ['low', -1, -2], ['below', -2, -4], ['belowPlus', -9, -9]];
    var score = $(this).text();
    var column = [[0, 1], [1, 1], [2, 2], [3, 1]];

            for (var i = 0; i < scale.length; i++)
             {    

                if (score <= scale[i][1]) {
                    $(this).addClass(scale[i][0]);
                }
            }

        });
   });

As shown above all columns are formatted by rule one. If I change:

if (score <= scale[i][1]) {

to

if (score <= scale[i][2]) {

all columns will be formatted by rule 2.

I need to be able to have some columns formatted by rule 1 others by rule 2. The column array will define which columns will be formatted by which rules (in the final product there will be 37 columns).

I am trying to do this with a variable:

var x = column[i][1];

and then change

if (score <= scale[i][1]) {

to

if (score <= scale[i][x]) {

However when I place the

var x = column[i][1];

into the loop block the code fails to format.

I have limited experience with js so I am wondering if I've made a syntax error.

The code am trying to get to work is:

$(function() {
    $( "td" ).each(function(index) {
        var scale = [['abovePlus', 20, 20], ['above', 5, 6], ['high', 2, 1], ['at', 0, 0], ['low', -1, -2], ['below', -2, -4], ['belowPlus', -9, -9]];
        var score = $(this).text();
        var column = [[0, 1], [1, 1], [2, 2], [3, 1]];

                for (var i = 0; i < scale.length; i++)
                 {    
                    var x = column[i][1];

                    if (score <= scale[i][x]) {
                        $(this).addClass(scale[i][0]);
                    }
                }

            });
       });

Thank you for any help.

And how exactly does the "*column array…define which columns will be formatted by which rule*"? — David Thomas, Nov 23 '14 at 01:28
The first number in each set of the column array is the column the second number is the rule that column should follow. The `var x` line a couple of lines below is supposed to set the number for the `scale [i][x]` in the line below that. In my tests this works when I replace the "i" in `var x = column[i][1];` with a number, but not when I leave it as "i". In any case, @dm4web solution below seems to do the trick. But if you want to tell me where I went wrong above, I am curious. — RawPaw, Nov 23 '14 at 14:23

score 2 · Accepted Answer · answered Nov 23 '14 at 01:19

If I understand the question, maybe this can help

//it is easier to handle with json array
var scale = [{'class': 'abovePlus', 'r1': 20,    'r2': 20}, 
             {'class': 'above',    'r1': 5,    'r2': 6}, 
             {'class': 'high',    'r1': 2,    'r2': 1}, 
             {'class': 'at',    'r1': 0,    'r2': 0}, 
             {'class': 'low',    'r1': -1,    'r2': -2}, 
             {'class': 'below',    'r1': -2,    'r2': -4}, 
             {'class': 'belowPlus',    'r1': -9,    'r2': -9}];
//three columns with data. skipping first
var column = [
    [0, 1],
    [1, 1],
    [2, 2]
];

$(function () {
    //finds each row
    $("tr").each(function () {
        //in row find each cell (td), but not the first
        $(this).find('td').not(':first').each(function (index) {

            var $td = $(this);
            //get score            
            var score = $(this).text();

            //moves through a variable
            $.each(scale, function (i, scl) {
                //get class, and value 1 i 2
                var newClass = scl.class;
                var r1 = scl.r1;
                var r2 = scl.r2;
                //get rul for column
                var rule = column[index][1];
                //based on the rules and values, add class to cell (td)
                if (rule == 1 && score < r1) $td.addClass(newClass);
                if (rule == 2 && score < r2) $td.addClass(newClass);

            })

        });

    })
});

TEST

Yes, you understood exactly. Thank you. I am going to be running this code through some tests today to be sure it handles the various cases it needs to, but at first glance it looks good. Thanks also for the commenting in the code. — RawPaw, Nov 23 '14 at 14:33

conditional formatting for html table varies by column

1 Answers1