这里有一些简单的声望。
场景
我有一个使用 JSP 动态构建的表。有几个<td>的单元格中有一个数字代表百分比。参见 this fiddle举个例子。我需要根据单元格中表示的百分比更改单元格的背景颜色。例如:
value < 50 = Red
value >= 50 & < 90 = Yellow
value >= 90 = Green
此外，我需要在单元格内容后附加“%”符号。例如:
90 = 90%
问题
How do I add a background-color based on the contents of the cell, and append text to it as well?
我有一些 jQuery 我打算为此使用，但它根本不起作用。这也在 the fiddle 中.我也希望它尽可能精简。如果这可以在几行中完成，那就太好了。 如果可以纯粹用 CSS 来完成那会更好，但我不认为这是可能的。
代码
(如果你不喜欢点击链接)
CSS
.red {
background-color: #f99;
}
.yellow {
background-color: #ff9;
}
.green {
background-color: #9f9;
}
.notApplicable {
background-color: #fff;
}
td.stopGapCondition {
text-align: center;
}
jQuery
if ($('.stopGapCondition').text() < 50) {
$('td .stopGapCondition').addClass('red');
}
if ($('.stopGapCondition').text() >= 50 && $('.stopGapCondition').text() < 90) {
$('td .stopGapCondition').addClass('yellow');
}
if ($('.stopGapCondition').text() >= 90) {
$('td .stopGapCondition').addClass('green');
}
HTML
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<title></title>
</head>
<body>
<table class="content bordered" border="3" cellspacing="2" cellpadding="3" valign="top">
<tbody>
<tr>
<th class="stopGapTH" colspan="4">
Patient List
</th>
<th class="stopGapTH" colspan="99">
Clinical Adherence Information
</th>
</tr>
<tr height="30">
<th align="middle">
Patient Name
</th>
<th align="middle">
DOB
</th>
<th align="middle">
Primary Disease
</th>
<th align="middle">
Risk Index
</th>
<th>
Athsma
</th>
<th>
COPD
</th>
<th>
Diabetes
</th>
<th>
Heart Disease
</th>
</tr>
<tr>
<td>
Louis Armstrong
</td>
<td>
Blah
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition">
50
</td>
<td class="stopGapCondition">
80
</td>
<td class="stopGapCondition">
75
</td>
<td class="stopGapCondition">
90
</td>
</tr>
<tr>
<td>
Bob Barker
</td>
<td>
Blah
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition red">
49
</td>
<td class="stopGapCondition yellow">
50
</td>
<td class="stopGapCondition yellow">
89
</td>
<td class="stopGapCondition green">
90
</td>
</tr>
<tr>
<td>
David Brinkley
</td>
<td>
1Blah
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
<tr>
<td>
Tom Brokaw
</td>
<td>
10Blah4
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
<tr>
<td>
Cad2 Sandy
</td>
<td>
01Blah
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
<tr>
<td>
Cad3 Sandy
</td>
<td>
0Blah
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
<tr>
<td>
Cad4 Sandy
</td>
<td>
Blah5
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
<tr>
<td>
Cad5 Sandy
</td>
<td>
01Blah5
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
<tr>
<td>
Alex Trebek
</td>
<td>
1Blah1
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
<tr>
<td>
Chucka Woolerya
</td>
<td>
10Blah51
</td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
<td class="stopGapCondition"></td>
</tr>
</tbody>
</table>
</body>
</html>
编辑:另外，我忘了提到如果它不包含数字，这意味着它可能包含“na”或“n/a”或“不适用”，它应该是白色的。我添加了 css 但忘了在问题中提及它。
最佳答案
需要使用.each来迭代结果；您不能同时对它们应用一个操作。
$('.stopGapCondition').each(function() {
var $this = $(this);
var value = $this.text();
if(!/^\s*\d+(\.\d+)?\s*$/.test(value)) {
$this.addClass('notApplicable');
return;
}
if(value < 50) {
$this.addClass('red');
} else if(value < 90) {
$this.addClass('yellow');
} else {
$this.addClass('green');
}
$this.text($this.text() + '%');
});
关于jquery - 根据单元格中的百分比更改 <td> 背景，并将 '%' 添加到数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9508325/