一个实用的JS对表格的特效

最新推荐文章于 2021-07-15 13:56:44 发布

iteye_8220

最新推荐文章于 2021-07-15 13:56:44 发布

阅读量217

点赞数

分类专栏： Web2.0 文章标签： Chrome vim UP JavaScript 脚本 ViewUI

本文链接：https://blog.csdn.net/iteye_8220/article/details/81655571

版权

Web2.0 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

正如上一篇文章所说，table是日常编辑中比较常用的一种结构。而单调的表格效果已经无法满足日益强烈的视觉需求。周末对表格的各行变色，鼠标跟踪进行了一些学习和研究，并学习了html的自定义标签，实现了按行进行mark的一个简单功能。

现在把效果和代码贴出来分享，希望给需要的人以帮助。

先看看效果：

图中第3条记录所在的行的背景色与别的行不一样，标志着鼠标目前在此行悬停。当鼠标移开之后，改行会恢复原先的背景色，此为鼠标跟踪功能。

图中的奇数行表现为一种颜色，偶数行表现为另外一种颜色，这个实现上比较简单，先统计行数n，然后用n模2，如果余数为0，则改行为偶数行，设置其背景色，如果余数为1，则为奇数行，设置其背景为另一种颜色。

再看看标记(mark)功能的示例：

深蓝色的行，02和04为标记了(marked)的行，相当于vim或者UE中的书签功能，选中之后，可以对这些行进行统一的某些操作，如删除，隐藏等操作，再次点击改行为取消标记。

代码比较简单，先看看样式表：

*{
	font-family:"Courier New";
	font-size:18px;
}
.trOdd{
	background-color:#FFFFFF;
}
.trEven{
	background-color:#EDF0F7;
}

然后是只包含一个函数的javascript文件

/*
	@param tableid the id of your table
	@param colors is a array contains 4 colors
	colors[0] -- color when mouse move over
	colors[1] -- color when mouse move out, if odd line
	colors[2] -- color when mouse move out, if even line
	colors[3] -- color when mouse clicked, make a new mark
*/
function chromeTable(tableid, colors){
	//if user didn't special the colors, use default.
	if(colors.length != 4){
		colors[0] = '#D6E9F8';
		colors[1] = '#FFFFFF';
		colors[2] = '#EDF0F7';
		colors[3] = '#67A7E3';	
	}
	//else use the user-defined colors
	var overColor = colors[0];
	var trColorOdd = colors[1];
	var trColorEven = colors[2];
	var selectedColor = colors[3];
	
	
	var trs = document.getElementById(tableid).getElementsByTagName("tr");
	for(var i=0; i<trs.length; i++){
		//initialize the TRs, add a new attribute : marked
		trs[i].setAttribute('marked','false');
		
		//set up the onMouseOver event handler
		trs[i].onmouseover = function(){
			var marked = this.getAttribute('marked');
			if(marked == 'false'){
				this.style.backgroundColor = overColor;
			}else{
				this.style.backgroundColor = selectedColor;
			}
		}
		
		//set up the onMouseOut event handler
		trs[i].onmouseout = function(){
			var marked = this.getAttribute('marked');
			if(marked == 'false'){
				if(this.rowIndex %2 == 0){
					this.style.backgroundColor = trColorEven;
				}else{
					this.style.backgroundColor = trColorOdd;
				}
			}else{
				this.style.backgroundColor = selectedColor;
			}
		}
		
		//set up the onClick event handler
		trs[i].onclick = function(){
			var marked = this.getAttribute('marked');
			if(marked == 'false'){
				this.setAttribute('marked','true');
				this.style.backgroundColor = selectedColor;
			}else{
				this.setAttribute('marked','false');
				if(this.rowIndex %2 == 0){
					this.style.backgroundColor = trColorEven;
				}else{
					this.style.backgroundColor = trColorOdd;
				}
			}			
		}
		
		//set the class of the TRs
		if(i%2 == 0){
			trs[i].className = 'trEven';	
		}else{
			trs[i].className = 'trOdd';	
		}
	}
}

最后，是使用方式，需求很简单，当页面加载完成后，调用js脚本对数据表进行渲染(onload事件)

<body onLoad="chromeTable('chrome',['#D6E9F8','#FFFFFF','#EDF0F7','#67A7E3']);">

这里，函数chromeTable(tableId, colors)中的第二个参数可以忽略，如果忽略，则按照默认的配色方案进行渲染。

下面对这个函数简单解释一下：

根据id获取table，并得到该table有多少行(tr)
根据colors数组初始化颜色表，如果用户没有指定，则使用默认的配色方案
遍历行(tr)数组，进行如下操作
1. 新建一个自定义属性marked，并初始化为false。
2. 注册鼠标移过事件
3. 注册鼠标移出事件
4. 注册点击事件
5. 对改行使用样式表中定义的样式
结束

流程比较简单，你可以在调用chromeTable时，自定义配色方案，注意一下colors数组中的顺序所代表的意义

鼠标移到改行时，改行需要呈现出来的颜色
鼠标移出时，改行需要呈现的颜色(奇数行)
鼠标移出时，改行需要呈现的颜色(偶数行)
单击改行(标记)时，改行需要呈现的颜色(应该是比较醒目的颜色)

okay, 关于table的这几种效果就先写到这里，后续的可能会写一些关于表格的可编辑(editable)，对指定行进行某些处理等操作的demo.

iteye_8220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个实用的JS对表格的特效

正如上一篇文章所说，table是日常编辑中比较常用的一种结构。而单调的表格效果已经无法满足日益强烈的视觉需求。周末对表格的各行变色，鼠标跟踪进行了一些学习和研究，并学习了html的自定义标签，实现了按行进行mark的一个简单功能。现在把效果和代码贴出来分享，希望给需要的人以帮助。先看看效果：图中第3条记录所在的行的背景色与别的行不一样，标志着鼠标目前在此行悬停。当鼠标移开之后，改行会恢...
复制链接

扫一扫

专栏目录