隔行换色+鼠标经过变色(ie6,ie7,ff)_ie6鼠标悬浮变色-优快云博客

本文介绍了一种使用JavaScript实现的表格交互效果，包括奇偶行不同背景色、鼠标悬停颜色变化及点击选中等功能，适用于网页表格美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<meta content="all" name="robots" /> 
<meta name="author" content="盛飞, SenFe" /> 
<meta name="Copyright" content="" /> 
<meta name="description" content="" /> 
<meta content="" name="keywords" /> 
<style type="text/css"><!-- 
#senfe { 
width: 300px; 
border-top: #000 1px solid; 
border-left: #000 1px solid; 
} 
#senfe td { 
border-right: #000 1px solid; 
border-bottom: #000 1px solid; 
} 
--></style> 
<script language="javascript"><!-- 
function senfe(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";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断 
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> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0" id="senfe"> 
<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("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); 
senfe("senfe","#fff","#ccc","#cfc","#f00"); 
--></script> 
</body> 
 