位置：首页>> 网络编程>> 网页设计>> 如何实现html表格里隔行换色（3）

如何实现html表格里隔行换色（3）

　来源：asp之家　发布时间：2007-10-19 13:42:00　

标签：换色,表格,html

下面贴出一种javascript实现的隔行换色的代码，还有鼠标经过时的背景色（以下2例代码来源网络）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>表格隔行换色</title><style type="text/css" media="screen"></style></head><body><table id="tab"><tr><td>12</td><td>12</td><td>12</td><td>12</td></tr><tr><td>12</td><td>12</td><td>12</td><td>12</td></tr><tr><td>12</td><td>12</td><td>12</td><td>12</td></tr><tr><td>12</td><td>12</td><td>12</td><td>12</td></tr><tr><td>12</td><td>12</td><td>12</td><td>12</td></tr></table><script type="text/javascript"></script></body></html>

这个方法的优点是我们不必去动表格的html代码，所以不论表格是什么样子的都没关系。他是使用javascript来控制表格的样式的。

下面的方法和上面的一样都是所以javascript，区别是代码更加的简洁:

<html><head><title>表格隔行换色 - asp之家</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>.t1 {background-color:#336699;text-align:center}.t2 {background-color:#ffcc00;text-align:center}</style></head><body bgcolor="#FFFFFF" text="#000000"><table id="table1" width="100％" border="0" cellpadding="0" cellspacing="0"><tr><td>Aspxhome.com</td></tr><tr><td>asp之家</td></tr><tr><td>www.aspxhome.com</td></tr><tr><td>asp之家</td></tr><tr><td>Aspxhome.com</td></tr><tr><td>欢迎光临！</td></tr><tr><td>隔行换色</td></tr></table><script Language="Javascript">for (i=0;i<table1.rows.length;i++) {(i％2==0)?(table1.rows(i).className = "t1"):(table1.rows(i).className = "t2");}</script></body></html>

第一页上一页 1 2

投稿

如何实现html表格里隔行换色（3）

猜你喜欢