CSS实现鼠标滑过表格变色

作者：Eve Cole 更新时间：2009-06-12 17:45:53

第一种：表达式

代码如下：
<html>
<头>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

.tablestyle{
背景颜色：#CCCCCC；边框：#ff0000 实心 2px；边框折叠：折叠；光标：手；宽度：100%；
}

.tablestyle td{ 边框：#ff0000 实心 2px;边框折叠：折叠；}

.tablestyle tr{
onmouseover: 表达式(onmouseover=function()
{
this.style.color='红色';
this.style.backgroundColor='黄色'
});
onmouseout:表达式(onmouseout=函数()
{

this.style.col
this.style.backgroundColor=''
}
）；
}

</style>

<title>无标题文档</title>
</head>

<body>

</正文>
</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－

简单的隔行修改：

<!- -

tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}

-->

</style>

<table>

第3列</td></tr> <tr><td>第4行</td><td>第4列</td></tr>

< tr><td>第5行</td><td>第5列</td></tr>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

每个单元格修改：

<!--

tr {background-color:expression((this.sectionRowIndex%2==0)? "红色":"蓝色")}

td {背景颜色:表达式((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"绿色":"黄色"))}

-->

</style>

<table>

第4列</td></tr> <tr><td>第5行</td><td>第5列</td></tr>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都可用表达式，实现网格很方便，但是，经测试，在IE6（其他版本）我不知道）上很正常，在firefox上没有任何反应……，原来在firefox上也有这个效果，就要用第二种方法

（2）用JS

鼠标滑过变色：

window.onload=function showtable(){

var tablename=document.getElementById("mytable");

var li=tablename.getElementsByTagName("tr");

for (var i=0;i<=li.length;i++){

li[i].style.backgroundColor="#FFB584";

li[i].onmouseover=function(){

this.style.backgroundColor="#FFFFFF";

}

li[i].onmouseout=function(){

this.style.backgroundColor="#FFB584"

}

</script>

</table>

----------------------------------------------------------------------------------------------------------------------------------------

隔行变色：

window.onload=function showtable(){

var tablename=document.getElementById("mytable");

var li=tablename.getElementsByTagName("tr");

for (var i=0;i<=li.length;i++){

if (i%2==0){

li[i].style.backgroundColor="#FFB584"; }

}否则 li[i].style.backgroundColor="#FFFFFF";

}

</script>

第4列</td></tr> <tr><td>第5行</td><td>第5列</td></tr>

< /table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都要用到JS，还需要table有id，可以对指定的table操作，但是，如果遇到某人的 firefox 安装了 NoScript 的话……可以无视了