the*_*ebe 1 html css jquery html-table
这是一些人的轻松声誉.
我有一个使用JSP动态构建的表.有几个<td>在单元格中有一个代表百分比的数字.看一下这个小提琴的例子.我需要根据单元格中表示的百分比更改单元格的背景颜色.例如:
value < 50 = Red
value >= 50 & < 90 = Yellow
value >= 90 = Green
另外,我需要将单元格内容附加'%'符号.例如:
90 = 90%
如何根据单元格的内容添加背景颜色,并将文本附加到其中？
我有一些jQuery我将用于此但它根本不工作.这也是小提琴.我也希望它尽可能精益.如果这可以在几行中完成,那将是很好的.如果它可以完全用CSS做得更好,但我不认为这是可能的.
(如果你不喜欢关注链接)
.red {
background-color: #f99;
}
.yellow {
background-color: #ff9;
}
.green {
background-color: #9f9;
}
.notApplicable {
background-color: #fff;
}
td.stopGapCondition {
text-align: center;
}?
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>
<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() + '%');
});?
| 归档时间： |
|
| 查看次数： |
3816 次 |
| 最近记录： |