- /**
- *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);
- }
js Table鼠标滑过变色,单击变色,隐藏某列的方法
最新推荐文章于 2020-08-05 09:08:42 发布