<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JavaScript实现隔行变色的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名称边框 */
background-color:#00a40c; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行变色 */
}
-->
</style>
<script language="javascript">
window.onload = function(){ //隔行变色代码
var oTable = document.getElementById("oTable");
for(var i=0;i<oTable.rows.length;i++){
if(i%2==0) //偶数行时
oTable.rows[i].className = "altrow";
}
}
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr>
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr>
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr>
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr>
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr>
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr>
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr>
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr>
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>表格各行变色和高亮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
//分析思路
//1.当页面加载完成后 实现表格的隔行变色
//2.给每一个行绑定一个onmouseover事件 实现高亮
//3.给每一个行绑定一个onmouseout事件 实现恢复原来的背景颜色
window.onload = function(){
//获取到表格对象
var table_obj = document.getElementsByTagName("table")[0];
//获取到当前的tbody
var tbody_obj = table_obj.tBodies[0];
//获取到所有的行
var trs_obj = tbody_obj.rows;
var trs_length = trs_obj.length;
//实现隔行变色
for(var i=0;i<trs_length;i++){
if(i%2 == 0){
trs_obj[i].bgColor = "#f00";
}else{
trs_obj[i].bgColor = "#00f";
}
//需要给每一行绑定一个onmouseover事件
var bgcolor;
trs_obj[i].onmouseover = function(){
bgcolor = this.bgColor; //在改变背景颜色之前将它保存起来
//要实现高亮
this.bgColor = "#ff0"; //把背景颜色改变了
}
//鼠标离开恢复原来的颜色
trs_obj[i].onmouseout = function(){
this.bgColor = bgcolor
}
}
}
</script>
</head>
<body>
<table border="2" width="300">
<thead><td>学号</td><td>姓名</td><td>班级</td></thead>
<tbody>
<tr><td>php007</td><td>zhangsan</td><td>php</td></tr>
<tr><td>php007</td><td>zhangsan</td><td>php</td></tr>
<tr><td>php007</td><td>lisi</td><td>php</td></tr>
<tr><td>php007</td><td>zhangsan</td><td>php</td></tr>
<tr><td>php007</td><td>zhangsan</td><td>php</td></tr>
<tr><td>php007</td><td>zhangsan</td><td>php</td></tr>
<tr><td>php007</td><td>zhangsan</td><td>php</td></tr>
</tbody>
</table>
</body>
</html>