Table formatting in html using jQuery

Question

I have a basic table with values that I am trying to control the formatting. I have achieved this in this example http://jsfiddle.net/hVJ4b/ for KPI2 of Service 1.

$('#work_table td.r2c1').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

    $('#work_table td.r2c2').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

    $('#work_table td.r2c3').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

    $('#work_table td.r2c4').each(function(){
    var test = $(this).html(); // this works
    var target = $('#work_table td.r2c5').html()
    var target2 = $('#work_table td.r2c5').html() - 5;
    //alert("test: " + test);
    //alert("target: " + target);
    //alert("target2: " + target2);
   if ($(this).html() >= target) { //if >= to target then green
        //alert($(this).value())
       $(this).css('background-color',green);
   } else if ($(this).html() < target && $(this).html() >= target2  ) { //if < to target then orange
        $(this).css('background-color',orange);
   } else { //if < to target then red
        $(this).css('background-color',red);
   } 
});

Now I can just easily copy and paste my JQuery to apply it to the other rows/KPIs. But i am looking for a better way of doing this without copying and pasting, as I don't think this is good practice.

Can anyone offer advise on this please?

Note: My initial approach to this could be completely wrong. I also want it to be flexible for any changes/additions to the table at a later date...

@kei I thought that was obvious from the fiddle example? tks — HattrickNZ
– HattrickNZ, Commented Dec 12, 2013 at 3:31

Code Maverick · Accepted Answer · 2013-12-11 23:28:18Z

1

If you are copy/pasting the same code into each one, just combine them all using:

var $worktable = $('#work_table'),
    $cells = $worktable.find('td');

$cells.filter('.r2c1, .r2c2, .r2c3, .r2c4').each(function ()
{
    // your code here.
});

When you plug in your code it would look something like this: See working jsFiddle demo.

I cleaned it up a bit for readability's sake. I removed the commented out parts. You can always add that stuff back in. I also optimized it slightly using cached vars where I could.

Here's the jQuery I used:

var red = "#ff0000",
    green = "#00ff00",
    orange = "#ff7f00";

$(function () 
{
    var $worktable = $('#work_table'),
        $cells = $worktable.find('td');

    $cells.filter('.r2').each(function () 
    {
        var $this = $(this),
            test = parseFloat($this.html());

        if (test >= 3)
            $this.css('background-color', '#f0f');
    });

    $cells.filter('.r2c1, .r2c2, .r2c3, .r2c4').each(function ()
    { 
        var $this = $(this),
            test = parseFloat($this.html()),
            target = parseFloat($cells.filter('.r2c5').html()),
            target2 = parseFloat(target - 5),
            color = test >= target 
                    ? green 
                    : test < target && test >= target2 
                        ? orange 
                        : red;

        $this.css('background-color', color);
    });
});

edited Dec 11, 2013 at 23:28

answered Dec 11, 2013 at 22:49

Code Maverick

20.5k12 gold badges65 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HattrickNZ Over a year ago

tks but what about r3c1 (i.e. row 3 and column 1 (aka KPI3 of Service1)) I was hoping to give them a class name of r3c1, .r232, .r3c3, .r3c4. will this still work in this case, or is this the wrong way to go about it?

Code Maverick Over a year ago

Ok ... I've added another answer that goes about things in a totally automated way without duplicating code.

Alexander Ryan Baggett · Accepted Answer · 2013-12-11 22:51:43Z

0

Why don't you consider writing a generic function that takes a variable called rowname and then you just pass in the row you got via jquery outside of the function.

 var x = $('#work_table td.r2');
 rowcolor (x);

function rowcolor (rowname)
{
    $(rowname).each(function(){//this is r2 for an example             want to get it to work for > values 
    //var test = $(this).html(); // this works
    var test = $(this).val(); // this does not work
    //alert("test: " + test);
    if ($(this).html() >= 3) {
        //alert($(this).value())
       $(this).css('background-color','#f0f');
    }
});


}

What the guy above me said works just fine. Mine is more javascript style.

answered Dec 11, 2013 at 22:51

Alexander Ryan Baggett

2,4074 gold badges37 silver badges68 bronze badges

Comments

Code Maverick · Accepted Answer · 2013-12-16 15:29:11Z

Here is how I would go about it. I wouldn't worry about classes at all. You know the positions of the cells, so you can just loop through each row and then each cell in that row and color as you go.

See working jsFiddle demo

JQUERY

var red = "#ff0000", green = "#00ff00", orange = "#ff7f00";

$(function () 
{
    $('#work_table tr').each(function (rowIndex)
    { 
        if (rowIndex > 0) // skip header row
        {
            var $row = $(this),
                $cells = $row.find('td'),
                count = $cells.length,
                target = parseFloat($cells[count - 2].innerText),
                target2 = target - 5.0;

            $cells.each(function (cellIndex)
            {
                var min = count - 6, 
                    max = count - 3;

                if (cellIndex >= min && cellIndex <= max) // only date cells
                {
                    var $cell = $(this),
                        value = parseFloat(this.innerText),
                        color = value >= target 
                                    ? green : value < target && value >= target2 
                                        ? orange : red;

                    $cell.css('background-color', color);
                }
            });
        }
    });
});

HTML

<table id="work_table" border="2">
    <tr>
        <th>Service</th>
        <th>Measure</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Date3</th>
        <th>Date4</th>
        <th>Target</th>
        <th>Trend</th>
    </tr>
    <tr>
        <td rowspan="4">Service1</td>
        <td>KPI1</td>
        <td>93.9</td>
        <td>99.0</td>
        <td>98.9</td>
        <td>99.0</td>
        <td>99.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI2</td>
        <td>91.4</td>
        <td>94.2</td>
        <td>75.9</td>
        <td>47.2.</td>
        <td>99.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI3</td>
        <td>91.0</td>
        <td>92.1</td>
        <td>83.9</td>
        <td>84.9</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI4</td>
        <td>95.7</td>
        <td>94.6</td>
        <td>87.4</td>
        <td>88.3</td>
        <td>92.4</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td rowspan="3">Service2</td>
        <td>KPI1</td>
        <td>45.0</td>
        <td>95.3</td>
        <td>76.4</td>
        <td>34.5</td>
        <td>90.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI2</td>
        <td>91.0</td>
        <td>92.1</td>
        <td>83.9</td>
        <td>84.9</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI3</td>
        <td>97.0</td>
        <td>96.1</td>
        <td>85.9</td>
        <td>84.9</td>
        <td>93.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td rowspan="5">Service3</td>
        <td>KPI1</td>
        <td>97.0</td>
        <td>93.1</td>
        <td>86.9</td>
        <td>82.9</td>
        <td>94.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI2</td>
        <td>50.2</td>
        <td>76.3</td>
        <td>69.4</td>
        <td>84.5</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI3</td>
        <td>12.0</td>
        <td>93.1</td>
        <td>87.9</td>
        <td>86.9</td>
        <td>97.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI4</td>
        <td>91.0</td>
        <td>92.1</td>
        <td>83.9</td>
        <td>84.9</td>
        <td>95.0</td>
        <td>Value_Trend</td>
    </tr>
    <tr>
        <td>KPI5</td>
        <td>99.0</td>
        <td>99.1</td>
        <td>89.2</td>
        <td>89.3</td>
        <td>99.0</td>
        <td>Value_Trend</td>
    </tr>
</table>

RESULTS

Results

tks, but the formatting does not work in that, they are all red.
What do you mean exactly? The jsFiddle is not all red. If you are talking about your HTML that I changed up. I do so because it was invalid. You can't have tr's nested within each other.
everything is red, there should be 3 different colours, depending on there value relative to the target value. tks
I don't see what you see. I edited the question to show the jsFiddle results I see. They are red, orange, and green, and which color it will be is based on that cell's value relative to the target value of the row it's in.

Collectives™ on Stack Overflow

Table formatting in html using jQuery

3 Answers 3

2 Comments

Comments

See working jsFiddle demo

JQUERY

HTML

RESULTS

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

JQUERY

HTML

RESULTS

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related