CSS实现鼠标滑过表格变色
4673 点击·0 回帖
灯火互联
楼主
 |  | |
 | 第一种: 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的话……可以无视了 | |
 |  |