每个单元格变色:
<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. 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 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. 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"; }else li[i].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的话……可以无视了