表格隔行变色 加鼠标移入移出及点击效果

表格隔行变色，也是一个提高用户体验的js效果。

效果实现：

表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。

鼠标移入某行时变颜色，移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。

表格点击变色。便于用户选中自己想保留的项。

 

说明：

i%2   每个数和2取模的值，只有0和1两种，这样就可以实现隔行变色的效果

tables_li[i].onoff = 1;  为了实现点击变色，鼠标移入移出时，颜色不被覆盖。

 

上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
table{border-collapse:collapse}
table td{height:26px; font-size:12px; color:#333; border:1px solid #09c; text-align:center; padding:0 10px;}
</style>
</head>

<body>

<script>
window.onload = function(){

    var tables = document.getElementById("tables");
    var tables_li = tables.getElementsByTagName("tr");
    var i=0;
    var len = tables_li.length;
    
    for(i=0; i<len; i++){
        
        tables_li[i].onoff = 1;
        tables_li[i].index = i;
        
        tables_li[i].style.backgroundColor = i%2?"#ace":"";

        tables_li[i].onmouseover = function(){
          if(this.onoff == 1){
            this.style.backgroundColor = "#06c";
            }
        }
        
        tables_li[i].onmouseout = function(){
          if(this.onoff == 1){
                this.style.backgroundColor = this.index%2?"#ace":"";
            }
        }

        tables_li[i].onclick = function(){
          if(this.onoff == 1){
              this.onoff = 0;
                this.style.backgroundColor = "#069";
            }else{
              this.onoff = 1;
                this.style.backgroundColor = this.index%2?"#ace":"";
            }
        }
        
        
    }

}


</script>


<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="tables">
  <tr>
    <td>1</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>2</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>3</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>4</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>5</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>6</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>7</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>8</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>9</td>
    <td>内容内容</td>
  </tr>
  <tr>
    <td>10</td>
    <td>内容内容</td>
  </tr>
</table>


</body>
</html>
posted @ 2012-05-08 18:27  jingangel  阅读(789)  评论(0)  编辑  收藏  举报