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

/**

*table变色方法

*

*@param tableId 需要设置变色的table的ID

*@param overColor 鼠标经过(悬浮在此行上)的颜色

*@param outColor 鼠标离开此行后的颜色

*@param clickColor 鼠标单击此行的颜色

*/

function setTableColor(tableId, overColor,outColor, clickColor) {

//获取此table里的tr数组

var trs = document.getElementById(tableId).getElementsByTagName("tr");

//单击行

var clickTR=null;

//遍历tr数组

for ( var i = 0; i < trs.length; i++) {

//绑定单击事件

trs[i].onclick = function() {

//this.x这里的isClick是自己指定的,只是为了标识此行是否被单击过了true为单击了,false为未单击

if (this.isClick != true) {

//如果此行为单击,则设置为已单击

this.isClick=true;

//clickTR是之前单击行的对象,判断是否为空(即该table未被单击过),是否是当前对象(单击的是否是已单击过的)

if(clickTR!=null&&clickTR!=this){

//如果都不是,则设置clickTR颜色为背景色(鼠标离开行的颜色),并且是指此行为未单击

clickTR.isClick=false;

clickTR.style.backgroundColor = outColor;

}

//设置this(当前单击行对象)的背景色为指定的单击颜色

this.style.backgroundColor = clickColor;

//保存当前单击对象

clickTR=this;

} else {

//如果单击的是已经单击的对象,则视为取消单击

this.isClick=false;

}

}

//绑定鼠标悬浮行事件

trs[i].onmouseover = function() {

if (this.isClick!=true)//如果是未单击则设置背景色为鼠标悬浮行颜色

this.style.backgroundColor = overColor;

}

//鼠标离开行事件

trs[i].onmouseout = function() {

if (this.isClick!=true)//如果是未单击则设置背景色为鼠标离开行颜色

this.style.backgroundColor = outColor;

}

}

}

/**

*隐藏Table某一列的方法

*

*@param tableId 需要设置隐藏列的table的ID

*@param clnIndex 需要隐藏的列的索引

*/

function setHiddenCol(tableId, clnIndex) {

var oTable = document.getElementById(tableId);

var cell=null;//每一行需要隐藏的单元格

//遍历此table的行数组

for (i = 0; i < oTable.rows.length; i++) {

cell=oTable.rows[i].cells[clnIndex];

cell.style.display = cell.style.display == "none" ? "block": "none";

}

}

//页面加载完成后,调用相关方法

window.onload = function() {

setTableColor('showList', '#9CCEF8', '#F5FAFF', '#7CFC00');

setHiddenCol('showList', 0);

}