移动鼠标改变Html表格背景颜色

时间:2014-07-20 20:09 来源: 我爱IT技术网作者:山风

此文我们简单的介绍如何利用html,css与js文档，来实现移动鼠标(mouseOver或mourseOut)改变表格列的顏色之效果，接下来分别说明演示页面、CSS代码、JS代码与网页输出结果页面。

效果演示：

在浏览器上执行index.htm页面，产生的结果画面显示截图

CSS代码：

负责控制Html标签属性的呈現效果，例如文字颜色、表格边框、宽度、高度之类的属性值设定。

table.show, table.show td{ 
    font:73% Arial, Helvetica, sans-serif; 
} 
table.show { 
    width:100%; 
    border-collapse:collapse; 
} 
table.show th, table.show td{ 
    text-align:left; 
    padding:.5em; 
    border:1px solid #fff; 
    text-align: center; 
} 
table.show th{ 
    background:#2F79B8 url(s3-bg.jpg) repeat-x; 
    color:#fff;text-align: center; 
} 
.empty{ 
    font-size:100%; 
}  
table.show tr.even td{ 
    background:#f9fbfd; 
} 
table.show tr.odd td{ 
    background:#e4e4e4; 
} 
tr.overCss td{ 
    background:#ffffa2; 
}

js代码：

在浏览器载入index.htm页面之后，负责动态操控改变Html元素的属性值，让该元素在输出端达到变换效果的目的

this.alterTableRowsColor = function() { 
    var preCss; 
    
 this.start = function(){ 
     var tables = document.getElementsByTagName('table'); 
      for(var i=0; i < tables.length; i++){  
          var tid = tables[i].getAttribute('id'); 
          if(tid.indexOf("form") != -1) 
            showRow(tables[i]); 
      } 
  }; 
    
 this.showRow = function(table){ 
        var trs = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); 
    for (var i = 0; i < trs.length; i++) { 
      trs[i].onmouseover = function(){ over(this); }; 
      trs[i].onmouseout = function(){ out(this,preCss); }; 
    } 
  }; 
 
  this.over = function(obj) { 
    preCss = obj.className; 
    obj.className = 'overCss'; 
  }; 
 
  this.out = function(obj,preCss){ 
     //alert("preCss=="+preCss); 
    obj.className = preCss; 
  }; 
     
    start(); 
       
};  
 
//window.onload = alterTableRowsColor;

index.htm页面程序代码

<html> 
<head> 
  <link rel="stylesheet" type="text/css" href="showTbl.css" /> 
  <script type="text/javascript" src="chgRowsBg.js"></script> 
</head> 
<body onload="alterTableRowsColor();"> 
 
<form name="form1" id="form1"> 
 <table border=0 width="100%"> 
    <tr> 
     <td> 
        <table id="form1:table1" border="0" cellpadding="0" cellspacing="0" width="100%" class="show"> 
            <THead> 
                <tr>            
                    <th>Title1</th> 
                    <th>Title2</th> 
                    <th>Title3</th> 
                    <th>Title4</th> 
                </tr>       
            </THead> 
          <TBody> 
            <tr class="even"> 
              <td>aaa1</td> 
              <td>aaa2</td> 
              <td>aaa3</td> 
              <td>aaa4</td> 
            </tr>   
            <tr class="odd"> 
              <td>bbb1</td> 
              <td>bbb2</td> 
              <td>bbb3</td> 
              <td>bbb4</td> 
            </tr> 
            <tr class="even"> 
              <td>ccc1</td> 
              <td>ccc2</td>  
              <td>ccc3</td> 
              <td>ccc4</td>     
            </tr> 
            <tr class="odd"> 
              <td>ddd1</td> 
              <td>ddd2</td> 
              <td>ddd3</td> 
              <td>ddd4</td> 
            </tr> 
            <tr class="even"> 
              <td>eee1</td> 
              <td>eee2</td>  
              <td>eee3</td> 
              <td>eee4</td>     
            </tr> 
          </TBody> 
        </table> 
   </td> 
  </tr> 
 </table> 
 </form> 
 
</body> 
</html>

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

移动鼠标改变Html表格背景颜色

第一章 JavaScript （基础）

第二章 JavaScript（高级）