每行 JQUERY 条件格式答案

【问题标题】：JQUERY Conditional Formatting per row每行 JQUERY 条件格式
【发布时间】：2015-11-22 09:01:15
【问题描述】：

<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 表上实现条件格式。比较一行中的数字，最低的元素将具有白色背景，而最高的数字将具有绿色背景。

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

我已经花了好几天的时间来做这件事，但无法成功。

我找到了以下一段代码，并根据我的特定需要对其进行了一些修改，但它不起作用。

【问题讨论】：

嗨皮埃尔。如果您将到目前为止的代码放入 codepen.io 或 jsfiddle.net 并从此处链接到它，您将获得更强/更快/更好的答案。
@Will 为什么不建议使用堆栈 sn-p，因为这是要在浏览器中运行的代码？
@DanielCook 因为我有一段时间没有使用stackoverflow了？ ;) 皮埃尔，方法如下：blog.stackexchange.com/2014/09/…
好的，我在代码 sn-p 中包含了代码

标签： javascript jquery formatting conditional

【解决方案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（我是为 web 开发做的）你可以点击 Ctrl-Shift-K 来获得一个 web 控制台，它会告诉你你的 javascript 中哪里有语法错误，这样你就可以开始调试了。

【讨论】：

我会试试的，谢谢，希望这是它唯一的问题。
好的我修好了，我想，改变了 var counts= $(this).find(':nth-child(n+1)') { return parseInt($(this).text( )); }）。得到（）; to var counts= $(this).find(':nth-child(n+1)');还是不行