clusterBuddy clusterBuddy - 2 months ago 12
jQuery Question

HTML Table conditional formatting code in Javascript not working as planned

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
}];

Answer

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);
        });
});