JavaScript简单实现表格格行换色

发表于 2009年9月17日由 kily

网页中数据表的设计往往采用格行变色的方法修饰表格，不仅看起来美观也一定程度上提升用户体验。传统的方法是用JavaScript来实现，今天我们来看看具体的实现方法。的确很简单哦。

先看最终效果图：

js-table-color-changing

表格的代码可以任意写，或者直接从DreamWeaver里面拉。最重要的是JavaScript代码，如下：

window.onload = function(){ //浏览器载入时执行函数
var tr = document.getElementsByTagName("tr");
		//获取文档中的tr元素。此时变量tr是个对象数组

for ( i=0; i<tr.length; i++){
	if (i%2 == 0){	//奇数行给tr元素添加ctr类属性
		tr[i].className += "ctr";
	}

	tr[i].onmouseover = function(){
		this.className += " trhover";
		//鼠标经过每个tr时追加给tr元素trhover类属性
	}
	tr[i].onmouseout = function(){
		this.className = this.className.replace(" trhover","");
		//鼠标离开每个tr时移除掉tr元素trhover类属性
	}
}

接下来的工作很简单了，就是把批段代码加入到你网页的script标签中。

点击查看效果及源码

《JavaScript简单实现表格格行换色》上有 20 条评论

修远兮在 2011年5月8日14:34 说：

简单实用的小代码。

回复 ↓
xiangxirenjingyou 在 2010年5月13日20:45 说：

JS用多了好卡

回复 ↓
0cai 在 2009年9月19日18:19 说：

隔行换色确实很注重用户体验的@

回复 ↓
- kily 在 2009年9月20日00:41 说：
  
  @0cai 呵呵。我想也是嘛^!^
  
  回复 ↓
bolo 在 2009年9月19日11:40 说：

不错,用JavaScript比用css更方便

回复 ↓
365hope 在 2009年9月19日11:17 说：

各行换色，在表格中，以及在留言中，还是非常好看的，未经分明，看上去非常舒服的！

回复 ↓
- kily 在 2009年9月19日12:26 说：
  
  @365hope 呵呵，那是，更重要的是增加了用户体验。
  
  回复 ↓
大剑在 2009年9月19日06:43 说：

怎么不用JQ实现呢，现在我都习惯了用JQ写JS了

回复 ↓
- kily 在 2009年9月19日07:59 说：
  
  @大剑呵呵，我正在研究JS所以用JS实现，感觉代码也挺简单的，也不错。
  
  回复 ↓
卢松松在 2009年9月19日04:16 说：

为什么不用css呢？

回复 ↓
安在 2009年9月18日11:42 说：

这个好…

回复 ↓
- kily 在 2009年9月18日11:58 说：
  
  @安安的留言总是言简意赅，一针见血^!^
  
  回复 ↓
feicun 在 2009年9月18日06:18 说：

技术型博主啊，颈仰啊

回复 ↓
- kily 在 2009年9月18日11:06 说：
  
  @feicun 嘿嘿。最近在研究JS呢，所以会写一些这方面的文章。
  
  回复 ↓
万戈在 2009年9月18日02:47 说：

本来有用过，但是被我去掉了。。。

回复 ↓
- kily 在 2009年9月18日11:07 说：
  
  @万戈这个我感觉还是在数据显示的时候会有用。
  
  回复 ↓
hongmop 在 2009年9月18日02:08 说：

都是通过jquery来实现的，原来javascript也代码比较少，就是不知道执行效率哪个高一点呢？

回复 ↓
- kily 在 2009年9月18日11:11 说：
  
  @hongmop JQuery做起来是方便很多，它是纯JS对象实现。而JavaScript则是用一些基本的数据结构和dom实现的。从这个例子看来这种方法的时间复杂度回比较高。具体哪个效率高我也拿不准。
  
  回复 ↓
sleepy 在 2009年9月18日00:20 说：

好像有纯css的方式的

回复 ↓
- kily 在 2009年9月18日00:52 说：
  
  @sleepy 对啊。确实有纯CSS实现的，不过用起来不方便还添加很多额外的DIV。最重要的是可定制性不高，不适合做信息量大的表格！
  
  回复 ↓

发表评论取消回复