表格隔行换色,鼠标经过变色功能实现

2008-10-16 14:15:00 | 【
    
    
    
    
    
    
    
    
    
    

表格隔行颜色会变化,当鼠标滑过某一行时,该行的颜色也会发生变化,当鼠标点击某一行,该行会高亮显示直到再次点击

查看全部代码 View Code

第一步:
在<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必须与样式中的定义进行对应

下载"表格隔行换色,鼠标经过变色功能实现"

  • 本地下载
  • 本地下载2

相关资源