CSS实现鼠标滑过表格变色

楼主^#

更多发布于：2011-12-09 05:02

[] 1


	第一种: expression 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> .tablestyle{ background-color:#CCCCCC; border:#ff0000 solid 2px; border-collapse:collapse;　cursor:hand;　 width:100%; } .tablestyle td{ border:#ff0000 solid 2px; border-collapse:collapse;} .tablestyle tr{ onmouseover:expression(onmouseover=function() { 　this.style.color='red'; 　this.style.backgroundColor='yellow' 　}); onmouseout:expression(onmouseout=function() { 　this.style.col 　this.style.backgroundColor='' 　} ); } </style> <title>无标题文档</title> </head> <body> 　 <table　class="tablestyle" width="0" border="0" cellspacing="0" cellpadding="0"> 　　 <tr> 　　<td>11111111111</td> 　　<td>22222222222</td> 　　</tr> 　　<tr> 　　<td>33333333333</td> 　　<td>44444444</td> 　　</tr> 　　<tr> 　　<td>55555</td> 　　<td>66666666</td> 　　</tr> 　<tr> 　　<td>77777777777</td> 　　<td>8888888888</td> 　 </tr> </table> </body> </html> －－－－－－－－－－－－－－－－－－－－－－－－－－－－简单的隔行变色： <style type="text/css"> <!-- tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")} --> </style> <table> <tr><td>第1行</td><td>第1列</td></tr> <tr><td>第2行</td><td>第2列</td></tr> <tr><td>第3行</td><td>第3列</td></tr> <tr><td>第4行</td><td>第4列</td></tr> <tr><td>第5行</td><td>第5列</td></tr> </table> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－每个单元格变色： <style type="text/css"> <!-- tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")} td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))} --> </style> <table> <tr><td>第1行</td><td>第1列</td></tr> <tr><td>第2行</td><td>第2列</td></tr> <tr><td>第3行</td><td>第3列</td></tr> <tr><td>第4行</td><td>第4列</td></tr> <tr><td>第5行</td><td>第5列</td></tr> </table> －－－－－－－－－－－－－－－－－－－－－－－－以上都用到expression，实现变得很方便，但是，经测试，在IE6（其它版本我不知道）上很正常，在firefox上无任何反应…… ，要想在firefox上也有此效果，就要用第二种方法（2）用JS 鼠标滑过变色： <script language="javascript"> window.onload=function showtable(){ var tablename=document.getElementById("mytable"); var li=tablename.getElementsByTagName("tr"); for (var i=0;i<=li.length;i++){ 　　li.style.backgroundColor="#FFB584"; 　　li.onmouseover=function(){ 　　this.style.backgroundColor="#FFFFFF"; 　　} 　　li.onmouseout=function(){ 　　this.style.backgroundColor="#FFB584" 　　} } } </script> <table id="mytable"> <tr><td>第1行</td><td>第1列</td></tr> <tr><td>第2行</td><td>第2列</td></tr> <tr><td>第3行</td><td>第3列</td></tr> <tr><td>第4行</td><td>第4列</td></tr> <tr><td>第5行</td><td>第5列</td></tr> </table> －－－－－－－－－－－－－－－－－－－－－－－－隔行变色： <script language="javascript"> 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.style.backgroundColor="#FFB584"; 　　}else li.style.backgroundColor="#FFFFFF"; } } </script> <table id="mytable"> <tr><td>第1行</td><td>第1列</td></tr> <tr><td>第2行</td><td>第2列</td></tr> <tr><td>第3行</td><td>第3列</td></tr> <tr><td>第4行</td><td>第4列</td></tr> <tr><td>第5行</td><td>第5列</td></tr> </table> －－－－－－－－－－－－－－－－－－－－－－－－以上都要用到JS，还需要table有个id，可以对指定的table操作，但是，假如遇到某人的firefox装了NoScript的话……可以无视了