表格隔行颜色会变化,当鼠标滑过某一行时,该行的颜色也会发生变化,当鼠标点击某一行,该行会高亮显示直到再次点击
第一步:
在<head>区添加以下样式和脚本
<style type="text/css"><!--
#table1 {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#table1 td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
--></style>
<script language="javascript"><!--
function SetColor(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
第二步:
在<body>区添加以下代码
<table border="0" cellpadding="0" cellspacing="0" id="table1">
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script language="javascript"><!--
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
SetColor("table1","#fff","#ccc","#cfc","#f00");
--></script>
其中表格的ID为table1必须与样式中的定义进行对应




