table根据表格内的元素改变行颜色的javascript实现
js
<script type="text/javascript">
function co(){
var table = document.getElementById("tab");
var len = table.rows.length;
var _row = table.rows;
for(var i = 0;i < len;i++){
var _cell = _row[i].cells;
var d=_cell[3].innerHTML;
if(d<3){
table.rows[i].style.backgroundColor = "blue";
}
else if(d<18){
table.rows[i].style.backgroundColor = "red";
}
else{
table.rows[i].style.backgroundColor = "yellow";
}
}
}
</script> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px}
table{ border-collapse:collapse}
td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;}
th{ cursor:pointer}
</style>
</head>
<body onload="co()">
<table width="400" id="tab">
<thead>
<tr>
<th width="100" onclick="kw.tabSort('tab',0)">First Name</th>
<th width="100" onclick="kw.tabSort('tab',1)">Last Name</th>
<th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th>
<th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kingwell</td>
<td>Leng</td>
<td>3/10/2012</td>
<td>1</td>
</tr>
<tr>
<td>1aJim</td>
<td>Green</td>
<td>3/5/2012</td>
<td>2</td>
</tr>
<tr>
<td>Kate</td>
<td>Bin</td>
<td>1/2/2012</td>
<td>3</td>
</tr>
<tr>
<td>Zte</td>
<td>Ri</td>
<td>5/3/2012</td>
<td>33</td>
</tr>
<tr>
<td>Bee</td>
<td>Dd</td>
<td>8/1/2012</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html> 