[界面开发] JS +CSS 设置表格隔行背景颜色与鼠标移动的颜色

xiaoerp

先看一个效果图
下载 (21.97 KB)
2010-12-21 14:46



把list表的Name属性值改为table1

• <script language="javascript">
• function addEvent(elm, evType, fn, useCapture)
• {
• if (elm.addEventListener){
• elm.addEventListener(evType, fn, useCapture);
• return true;
• } else if (elm.attachEvent){
• var r = elm.attachEvent("on"+evType, fn);
• return r;
• } else {
• alert("出错！");
• }
• }
• function getTable(tableId, rvContent)
•     {
•         var tabObj;
•         var tables = rvContent.getElementsByTagName("table");
•         for (var i = 0; i < tables.length; i++)
•         {
•             if (tables.getAttribute("LID") == tableId)
•             {
•                 tabObj= tables;
•                 break;
•             }
•         }
•         return tabObj;
•     }
•     function getRVContent()
•     {
•         var objName = getObjectName();
•         return  eval("document.getElementById('RVContent" + objName + "');");
•     }
•     function getObjectName()
•     {
•         return document.getElementById("cv.id").value;
•     }
• addEvent(window, "load", setTabStyle);
• function setTabStyle() {
•         var tab = getTable("table1", getRVContent());   //list表的name属性值
•         var tr = tab.getElementsByTagName("tr");
•         for (var i = 0; i < tr.length; i++) {       // 如果是多行表头时，可以改 i 的起始值
•             if (i % 2 == 0) {
•                 tr.style.backgroundColor = "#ccc";
•                 tr.onmouseover = function() {
•                     this.style.background = "red"
•                 };
•                 tr.onmouseout = function() {
•                     this.style.background = "#ccc"
•                 }
•             } else {
•                 tr.style.backgroundColor = "#fff";
•                 tr.onmouseover = function() {
•                     this.style.background = "red"
•                 };
•                 tr.onmouseout = function() {
•                     this.style.background = "#fff"
•                 }
•             }
•         }
•     }
• </SCRIPT>
  

复制代码


该贴已经同步到 xiaoerp的微博