js Table滑鼠滑過變色,單擊變色,隱藏某列的方法
阿新 • • 發佈：2019-01-21
-
/**
-
*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);
- }