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

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

下面贴出一种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

投稿

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

猜你喜欢

pytest接口测试之fixture传参数request的使用

Tensorflow 卷积的梯度反向传播过程

Python实现读取文件最后n行的方法

python实现支持目录FTP上传下载文件的方法

统计出现最多的字符次数的js代码

利用bootstrapValidator验证UEditor

Python爬虫爬取Bilibili弹幕过程解析

VSCode的使用配置以及VSCode插件的安装教程详解

python正则表达式实现自动化编程

Python学习之sys模块使用教程详解

一文带你吃透Python中的日期时间模块

Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)

Python中使用第三方库xlrd来读取Excel示例

使用Python爬取小姐姐图片（beautifulsoup法）

Python创建文件夹与文件的快捷方法

Python爬虫突破反爬虫机制知识点总结

Python+Opencv实现图像匹配功能(模板匹配)

Python相互导入的问题解决

如何利用Fiddler模拟恶劣网络环境

SQLServer XML查询快速入门(18句话)