随笔-103  评论-37  文章-0  trackbacks-0
<!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">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
<!--
    
//分别是奇数行默认颜色,偶数行颜色,鼠标放上时奇偶行颜色 by QQ:190988779 at 2008-3-26 13:55:55
    var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"];
    
//从前面iHead行开始变色,直到倒数iEnd行结束
    function addTableListener(o,iHead,iEnd)
    
{
        o.style.cursor 
= "normal";
        iHead 
= iHead > o.rows.length?0:iHead;
        iEnd 
= iEnd > o.rows.length?0:iEnd;
        
for (var i=iHead;i<o.rows.length-iEnd ;i++ )
        
{
            o.rows[i].onmouseover 
= function(){setTrBgColor(this,true)}
            o.rows[i].onmouseout 
= function(){setTrBgColor(this,false)}
        }

    }

    
function setTrBgColor(oTr,b)
    
{
        oTr.rowIndex 
% 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] : oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0];
    }

    window.onload 
= function(){addTableListener(document.getElementById("tbColor"),0,0);}
//-->
</script>
</head>



<body>
<table border="1" width="100%" id="tbColor">
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
    
<tr><td>11</td><td>11</td><td>11</td></tr>
</table> 
</body>
</html>

posted on 2008-11-19 15:35 鱼有所思 阅读(2228) 评论(1)  编辑 收藏 引用 网摘 所属分类: AJAXHTML

评论:
# re: 表格隔行变色,鼠标放上变不同颜色。兼容IE,FF firefox 2008-11-19 15:37 | 鱼有所思
表格:
<table width=100 height=100 ID="db">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

用css的expression可以简单的实现,但只在ie中有效,如下:
<style>
.db{background-color:expression((this.parentElement.sectionRowIndex%2==0)?'#efffa7':'#fff');}
</style>

更通用的方法是用javascript来实现:
<style>
.tr0{background-color:red;}
.tr1{background-color:yellow;}
</style>

<script language="javascript">
var trs = document.getElementById("db").getElementsByTagName("tr");
for(var i=0; i<trs.length; i++)
{
trs[i].className = "tr"+i%2;
}
</script>  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航: