CSS實現鼠標滑過表格變色

 

每一個單元格變色:javascript

<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>
css

------------------------java

以上都用到expression,實現變得很方便,可是,經測試,在IE6(其它版本我不知道)上很正常,在firefox上無任何反應…… ,要想在firefox上也有此效果,就要用第二種方法jquery

(2)用JSexpress

鼠標滑過變色:ide

<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>
測試

------------------------this

以上都要用到JS,還須要table有個id,能夠對指定的table操做,可是,假如遇到某人的firefox裝了NoScript的話……能夠無視了firefox

相關文章
相關標籤/搜索