HTML Table conditional formatting code in Javascript not working as planned

Question

I am trying to create a set of rules that are inter-dependent between td element values in my table that affect the row style.

First issue

I am conditional formatting my table rows to style different background colors under certain rules.

Expected Result:

if Width > 0 => color red
if Width == 0 && Height > 0 => color blue
if Width > 0 && Height > 0 => color yellow
if Width == 0 && Height == 0 => color white

Reality Result

Width > 0 => color red ✓ Works
Width == 0 && Height > 0 => color blue ✓ Works
if Width > 0 && Height > 0 => color yellow X Doesn't work, colors blue.
if Width == 0 && Height == 0 => color white ✓ Works

Second issue

Is that when I press select 'rows per page' or the pagination numbers, it loses any conditional style.

Please feel free to suggest best practice to execute this, if you have a better way. Thanks and here is my code:

HTML

    <table id="table1"
       data-toggle="table"
       data-url="data1.json"
       data-pagination="true"
       data-sort-order="desc">
    <thead>
    <tr>
        <th data-sortable="true" data-field="name" >Name</th>
        <th data-sortable="true" data-field="W">Width</th>
        <th data-sortable="true" data-field="H">Height</th>
        <th data-sortable="true" data-field="D">Depth</th>
    </tr>
    </thead>
</table>

Javascript

var Counter = null;
$('#table1').on('load-success.bs.table', function () {

        $('td:nth-child(2)').each(function() {
            var redValue = $(this).text();
            if (redValue > 0) {
                var oTableRow = $(this).parent();
                oTableRow.css('background-color', 'red');
                Counter = 1; //W>0
            }else if(redValue == 0){
                Counter = 2;
            }
        });
        $('td:nth-child(3)').each(function() {
            var blueValue = $(this).text();
            var oTableRow = $(this).parent();
            if ((Counter= 2) && (blueValue > 0)) {
                oTableRow.css('background-color', 'blue');
            }else if((Counter == 1)&&(blueValue > 0)){
                oTableRow.css('background-color', 'yellow');

            }
        });
    });

JSON Data set

    [{
  "name": "First Value",
  "W": 0,
  "H": 0,
  "D": 100
},{
"name": "First Value",
"W": 1,
"H": 0,
"D": 100
},{
"name": "First Value",
"W": 0,
"H": 1,
"D": 100
},{
"name": "First Value",
"W": 1,
"H": 1,
"D": 100
}];

redValue = $(this).text() assigns a string to that variable. If you're going to make numeric comparisons, you need to convert that to a number. (There may be other problems in your code, but I noticed that first.) — Stephen Thomas
– Stephen Thomas, Commented Aug 7, 2016 at 22:03
second loop will always be dependent on last row of first loop. Presumably you want to loop rows and check values on each row — charlietfl
– charlietfl, Commented Aug 7, 2016 at 22:16
@charlietfl - would you be able to organize that in an answer that adheres to the set of rules and I'll set your answer as the correct one? — clusterBuddy
– clusterBuddy, Commented Aug 8, 2016 at 5:27

Thomas · Accepted Answer · 2016-08-08 08:19:50Z

1

as @charlietfl said, you want to loop the rows, and then check the conditions and set color by row. Then, instead of messing around with nested if-elses to determine the color of that row, I've defined a 2x2 table colorMapping containing the colors for each possible result:

first row: height === 0
second row: height > 0
first col: width === 0
second col: width > 0

this should do the job:

$('#table1').on('load-success.bs.table', function(){
    //create a color-mapping
    var colorMapping = [
        'white', 'red',
        'blue',  'yellow'
    ];

    $('tr', this)   //get rows ...
        .has('td')  //... that contain td-nodes
        .each(function(){
            var $row = $(this);
            //get w for this row
            var w = +$row.find('td:eq(1)').text();
            //get h for this row
            var h = +$row.find('td:eq(2)').text();

            //check wich of the four colors to choose
            var color = colorMapping[ (h>0? 2: 0) + (w>0? 1: 0) ];

            //assign color to this row
            $row.css('background-color', color);
        });
});

edited Aug 8, 2016 at 8:19

answered Aug 7, 2016 at 22:32

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

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

1 Comment

clusterBuddy Over a year ago

Hi, thanks for the reorganized and ternary dynamic function, but it doesn't adhere to the set rules: the first row (w=0,h=0) is supposed to be white, the second row (w>0,h=0) is supposed to be red, the third row (w=0,h>0) is supposed to be blue... thanks for the work on the function but with my nested if's I had only 1 rule that didn't work so I was hoping for amending that as I was following a specific logic there, help on that would be greatly appreciated.

Collectives™ on Stack Overflow

HTML Table conditional formatting code in Javascript not working as planned

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related