js Table鼠标滑过变色,单击变色,隐藏某列的方法

1. /**
   
2.         *table变色方法 
   
3.         *
   
4.         *@param tableId 需要设置变色的table的ID
   
5.         *@param overColor 鼠标经过(悬浮在此行上)的颜色
   
6.         *@param outColor 鼠标离开此行后的颜色
   
7.         *@param clickColor 鼠标单击此行的颜色
   
8.         */
   
9.         function setTableColor(tableId, overColor,outColor, clickColor) {
   
10.                 //获取此table里的tr数组
    
11.                 var trs = document.getElementById(tableId).getElementsByTagName("tr");
    
12.                 //单击行
    
13.                 var clickTR=null;
    
14.                 //遍历tr数组
    
15.                 for ( var i = 0; i < trs.length; i++) {
    
16.                         //绑定单击事件
    
17.                         trs[i].onclick = function() {
    
18.                                 //this.x这里的isClick是自己指定的,只是为了标识此行是否被单击过了true为单击了,false为未单击
    
19.                                 if (this.isClick != true) {
    
20.                                         //如果此行为单击,则设置为已单击
    
21.                                         this.isClick=true;
    
22.                                         //clickTR是之前单击行的对象,判断是否为空(即该table未被单击过),是否是当前对象(单击的是否是已单击过的)
    
23.                                         if(clickTR!=null&&clickTR!=this){
    
24.                                                 //如果都不是,则设置clickTR颜色为背景色(鼠标离开行的颜色),并且是指此行为未单击
    
25.                                                 clickTR.isClick=false;
    
26.                                                 clickTR.style.backgroundColor = outColor;
    
27.                                         }
    
28.                                         //设置this(当前单击行对象)的背景色为指定的单击颜色
    
29.                                         this.style.backgroundColor = clickColor;
    
30.                                         //保存当前单击对象
    
31.                                         clickTR=this;
    
32.                                 } else {
    
33.                                         //如果单击的是已经单击的对象,则视为取消单击
    
34.                                         this.isClick=false;
    
35.                                 }
    
36.                         }
    
37.                         //绑定鼠标悬浮行事件
    
38.                         trs[i].onmouseover = function() {
    
39.                                 if (this.isClick!=true)//如果是未单击则设置背景色为鼠标悬浮行颜色
    
40.                                         this.style.backgroundColor = overColor;
    
41.                         }
    
42.                         //鼠标离开行事件
    
43.                         trs[i].onmouseout = function() {
    
44.                                 if (this.isClick!=true)//如果是未单击则设置背景色为鼠标离开行颜色
    
45.                                         this.style.backgroundColor = outColor;
    
46.                         }
    
47.                 }
    
48.         }
    
49.         /**
    
50.         *隐藏Table某一列的方法
    
51.         *
    
52.         *@param tableId 需要设置隐藏列的table的ID
    
53.         *@param clnIndex 需要隐藏的列的索引
    
54.         */
    
55.         function setHiddenCol(tableId, clnIndex) {
    
56.                 var oTable = document.getElementById(tableId);
    
57.                 var cell=null;//每一行需要隐藏的单元格
    
58.                 //遍历此table的行数组
    
59.                 for (i = 0; i < oTable.rows.length; i++) {
    
60.                 cell=oTable.rows[i].cells[clnIndex];
    
61.                         cell.style.display = cell.style.display == "none" ? "block": "none";
    
62.                 }
    
63.         }
    
64.         //页面加载完成后,调用相关方法
    
65.         window.onload = function() {
    
66.                 setTableColor('showList', '#9CCEF8', '#F5FAFF', '#7CFC00');
    
67.                 setHiddenCol('showList', 0);
    
68.         }