CODEWITHSUNDEEP
javascriptjqueryformattingconditional-statements
Pierre Roberge
Pierre Roberge

Reputation: 11

JQUERY Conditional Formatting per row

<script>

$(document).ready(function(){
// Function to get the Max value in Array
Array.max = function( array ){
return Math.max.apply( Math, array );
};

//select row on which conditional formatting will apply
$(".conditional").each(function(){

// get all TDs except for first column

    var counts= $(this).find(':nth-child(n+1)');

// return max value
var max = Array.max(counts);

xr = 255;
xg = 255;
xb = 255;

yr = 243;
yg = 32;
yb = 117;

n = 100;

// Iterates on each TD except the first column
$(this).find(':nth-child(n+1)').each(function(){

//assign color based on difference from min and max
var val = parseInt($(this).text());
var pos = parseInt((Math.round((val/max)*100)).toFixed(0));
red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0));
green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0));
blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0));
clr = 'rgb('+red+','+green+','+blue+')';
$(this).css("background-color",clr);
});

});
});
</script>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
   .year {
  background-color: #eeeeee;
    	font-size: 30px;
     text-align: center;
     font-weight: bold; 
    	padding: 30px;
}
	table.tableizer-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
   margin:auto
    } 
.tableizer-table td {
	padding: 10px;
	margin: 5px;
	border: 1px solid #ccc;
  text-align: center;
  width:120px;
}
.tableizer-table th {
	background-color: #eeeeee; 
	color: #111;
	font-weight: bold;
  	padding: 10px;
  font-size: 18px;
}
.separator {
  background-color: #ffffff;
}
  
.firstcolumn {
 font-weight: bold; 
}

</style>
</head>

<body>
<table id="mytable" class="tableizer-table">
<tr><td class="year">2015</td></tr>
 <tr class="conditional"><td class="firstcolumn">Hwy (MPGe)</td><td>109</td><td>108</td><td>110</td><td>92</td><td>101</td><td>93</td><td>&nbsp;</td></tr>
 <tr class="conditional"><td class="firstcolumn">City (MPGe)</td><td>128</td><td>122</td><td>99</td><td>120</td><td>126</td><td>122</td><td>&nbsp;</td></tr>
 <tr class="conditional"><td class="firstcolumn">Combined (MPGe)</td><td>119</td><td>&nbsp;</td><td>105</td><td>105</td><td>114</td><td>114</td><td>&nbsp;</td></tr>
</table>

I am new to Jquery and javascript and trying to implement conditional formatting on a html table. Where the numbers in one row are compared and the lowest element will have a white background and the highest number will have a green background.

The rows on which the conditional formatting needs to work have a class called "conditional". The first column does not contain a number so needs to be excluded from the conditional formatting.

I have been spending several days to do this and cannot succeed.

I found the following piece of code and modified it slightly for my specific needs but it does not work.

Upvotes: 0

Views: 842

Answers (1)

kingledion
kingledion

Reputation: 2510

I ran it in a browser called from this HTML document:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src='~/altitude/jquery-2.1.4.min.js'></script>      
    <script type="text/javascript" src="~/workspace/test.js";></script>
</head>
<body>
    <ul id = "squarePos">
        <li class = "conditional">Header</div>    
        <li class = "conditional">1</div>        
        <li class = "conditional">4</div>      
        <li class = "conditional">2</div>          
        <li class = "conditional">3</div>   
    </ul>  
</body>
</html>

The code won't run because you seem to have more than one set of unmatching parenthesis or brackets.

If you use firefox (which I do for web developement) you can hit Ctrl-Shift-K to get a web console that will show you where you have syntax errors in your javascript so you can get on to the debugging.

Upvotes: -1

Related Questions