Question

<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>

我是Jquery和javascript的新手，并尝试在html表上实现条件格式。比较一行中的数字，最低的元素将具有白色背景，最高的数字将具有绿色背景。

条件格式需要工作的行有一个名为“conditional”的类。第一列不包含数字，因此需要从条件格式中排除。

我花了几天时间才做到这一点，但不能成功。

我找到了以下代码，并根据我的具体需求稍作修改，但它不起作用。

Answer 1

我在这个HTML文档调用的浏览器中运行它：

<!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>

代码不会运行，因为您似乎有多组不匹配的括号或括号。

如果您使用firefox（我用于网络开发），您可以按Ctrl-Shift-K获取一个Web控制台，它将显示您在javascript中存在语法错误的位置，以便您可以继续进行调试。 / p>

每行JQUERY条件格式

1 个答案: