实用的隔行换色效果
javascript
python
shell
powershell
python模块
php编程
php实例
asp.net
正则表达式
nginx
apache
linux
linux命令
centos
ubuntu
mysql
sql数据库
css教程
首页
脚本编程
网站编程
数据库
系统管理
服务器管理
网页教程
软件教程
电脑教程
手机教程
工具软件
电子书籍
php实例
shell脚本
jquery选择器
python模拟登录
linux命令
nginx
apache
当前位置：
首页
>
脚本特效
>
文本链接
> 正文
实用的隔行换色效果
发布时间：2020-08-19
编辑：
脚本学堂
实用的隔行换色效果，用于表格中的隔行换色，这里借助javascript实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实用的隔行换色效果</title> <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>"> <!-- var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"]; function addTableListener(o,iHead,iEnd) { o.style.cursor = "normal"; iHead = iHead > o.rows.length?0:iHead; iEnd = iEnd > o.rows.length?0:iEnd; for (var i=iHead;i<o.rows.length-iEnd ;i++ ) { o.rows[i].onmouseover = function(){setTrBgColor(this,true)} o.rows[i].onmouseout = function(){setTrBgColor(this,false)} } } function setTrBgColor(oTr,b) { oTr.rowIndex % 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] : oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0]; } window.onload = function(){addTableListener(document.getElementById("tbColor"),0,0);} //--> </script> </head> <body> <table border="1" width="500" id="tbColor" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#C0C0C0"> <tr><td height="25">1</td><td height="25">15</td><td height="25">29</td></tr> <tr><td height="25">2</td><td height="25">16</td><td height="25">30</td></tr> <tr><td height="25">3</td><td height="25">17</td><td height="25">31</td></tr> <tr><td height="25">4</td><td height="25">18</td><td height="25">32</td></tr> <tr><td height="25">5</td><td height="25">19</td><td height="25">33</td></tr> <tr><td height="25">6</td><td height="25">20</td><td height="25">34</td></tr> <tr><td height="25">7</td><td height="25">21</td><td height="25">35</td></tr> <tr><td height="25">8</td><td height="25">22</td><td height="25">36</td></tr> <tr><td height="25">9</td><td height="25">23</td><td height="25">37</td></tr> <tr><td height="25">10</td><td height="25">24</td><td height="25">38</td></tr> <tr><td height="25">11</td><td height="25">25</td><td height="25">39</td></tr> <tr><td height="25">12</td><td height="25">26</td><td height="25">40</td></tr> <tr><td height="25">13</td><td height="25">27</td><td height="25">41</td></tr> <tr><td height="25">14</td><td height="25">28</td><td height="25">42</td></tr> </table> </body> </html>
提示：可修改代码后再运行!
上一篇：
js实现的静态分页效果-点击分页链接-页内刷新
下一篇：
设置文字大中小
与 实用的隔行换色效果 有关的文章
本文标题：
实用的隔行换色效果
本页链接：
http://www.jb200.com/tx/151.html
浏览排行
1
使用jQuery实现公告文字左右滚动
2
jquery实现文字上下滚动
3
css可定义颜色的文字删除线、下划线
4
使用jQuery插件来实现的多行文字滚屏效果
5
jQuery限制文本框中只能输入中文或英文
6
使用JavaScript实现链接文字翻滚特效
7
JavaScript实现文字颜色循环变化
8
js实现的静态分页效果-点击分页链接-页内刷
9
定制Title文字说明效果
10
设置文字大中小
栏目分类
菜单导航
网页布局
背景特效
广告代码
图片特效
CSS相关
日期时间
文本链接
表单及按钮
表格相关
计算转换
其它
栏目导航
脚本
服务器
数据库
python
linux
linux命令
shell脚本
javascript
javascript数组
jquery
jquery选择器
jquery事件
jquery菜单
python列表
python爬虫
python模拟登录
php编程
php教程
php面试题
php随机数
php数组
php分页
php正则
php排序
asp.net
批处理
正则表达式
mysql
mysql分页
mysql存储过程
mysql日志
mysql教程
sql数据库
nginx
apache
手机教程
热点文章
1
jquery实现文字上下滚动
2
用javscript实现逐行文本滚动效果
3
使用jQuery实现公告文字左右滚动
4
JavaScript实现文字颜色循环变化
5
使用JavaScript实现链接文字翻滚特效
6
jQuery限制文本框中只能输入中文或英文
7
css可定义颜色的文字删除线、下划线
8
定制Title文字说明效果
9
js实现的静态分页效果-点击分页链接-页内刷
10
实用的隔行换色效果
关于本站
|
网站地图
|
联系我们
|
免责声明
|
友情链接
鄂ICP备13010364号-22
CopyRight © 2010-2021
脚本学堂
Jb200.com , All Rights Reserved.
