郁闷吧
懒人建站QQ群：4188479 63242849 39070147 130690866
懒人建站
主页
JS代码
导航菜单
焦点幻灯片
广告代码
网页特效
jquery 特效
滚动代码
建站技巧
威客网排行榜
用户体验设计
html+css
html+css技巧
html+css布局实例
html+css模板
兼职网站大全
当前位置：
懒人建站
>
JS代码
>
网页特效
>
隔行换色+单击表格行变色
关键字：
表格特效
隔行换色
表格可以隔行换色，当鼠标划过表格行的时候表格行也会变色，当单击表格行的时候表格也会变色。
查看演示
·
进入下载地址列表
收 藏
相关代码
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>各行换色+单击表格行变色- 懒人建站-51xuediannao.com</title> <style type="text/css"> <!-- #ejiaA1 { width: 550px; border-top: #E3E3E3 1px solid; border-left: #E3E3E3 1px solid; } #ejiaA1 td,#ejiaA1 th { padding: 5px;border-right: #E3E3E3 1px solid; border-bottom: #E3E3E3 1px solid; font-size:12px; height:16px; line-height:16px; } #ejiaA1 tr td span {color: #686868} #ejiaA1 tr td span.st1 {color: #ff0000} --></style> <script language="javascript"><!-- function ejiaA1(o,a,b,c,d){ var t=document.getElementById(o).getElementsByTagName("tr"); for(var i=0;i<t.length;i++){ t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; t[i].onclick=function(){ if(this.x!="1"){ this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断 this.style.backgroundColor=d; }else{ this.x="0"; this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; } } t[i].onmouseover=function(){ if(this.x!="1")this.style.backgroundColor=c; } t[i].onmouseout=function(){ if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; } } } --></script> </head> <body> <table width="500" border="0" cellspacing="0" cellpadding="0" id="ejiaA1"> <tr> <td colspan="4"><span class="st1"><span><a href=http://51xuediannao.com target="_blank">懒人建站</a>收集</span> 当前页：<span>第1页 共2页 </span> 总次数：<span>66</span> 总时长：<span>284小时36分27秒</span></span></td> </tr> <tr> <th>接入方式</th><th>上网时间</th><th>下网时间</th><th>上网时长</th> </tr> <tr> <td>宽带接入</td> <td>2008-4-23 12:40:18</td> <td>2008-4-23 14:50:28</td> <td>2小时10分10秒</td> </tr> <tr> <td>宽带接入</td> <td>2008-4-23 12:40:18</td> <td>2008-4-23 14:50:28</td> <td>2小时10分10秒</td> </tr> <tr> <td>宽带接入</td> <td>2008-4-23 12:40:18</td> <td>2008-4-23 14:50:28</td> <td>2小时10分10秒</td> </tr> <tr> <td>宽带接入</td> <td>2008-4-23 12:40:18</td> <td>2008-4-23 14:50:28</td> <td>2小时10分10秒</td> </tr> <tr> <td>宽带接入</td> <td>2008-4-23 12:40:18</td> <td>2008-4-23 14:50:28</td> <td>2小时10分10秒</td> </tr> <tr> <td>宽带接入</td> <td>2008-4-23 12:40:18</td> <td>2008-4-23 14:50:28</td> <td>2小时10分10秒</td> </tr> </table> <script language="javascript"><!-- //ejiaA1("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); ejiaA1("ejiaA1","#fff","#F5F5F5","#FFFFCC","#FFFF84"); --></script> <!--下面只是说明与程序代码无关--> <div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;"> <span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br> <a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/> <span>我们为您提供- <a href="http://www.51xuediannao.com/html+css/">HTML+CSS模板</a>， <a href="http://www.51xuediannao.com/js/">JS代码</a>， <a href="http://www.51xuediannao.com/JS/texiao/">网页特效</a>， <a href="http://www.51xuediannao.com/JS/nav/">导航菜单</a>， <a href="http://www.51xuediannao.com/JS/Slide/">焦点幻灯片<a>， <a href="http://www.51xuediannao.com/JS/show/">网页欣赏</a>和 <a href="http://www.51xuediannao.com/JS/jiqiao/css/">CSS技巧</a>；</span><br /> <span>懒人建站只收录实用和能提高用户体验的代码</span><br /> <span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span> </div> </body> </html>
相关代码
分享到：
代码说明:
表格可以隔行换色，当鼠标划过表格行的时候表格行也会变色，当单击表格行的时候表格亦变色。
TAG标签
jQuery
下拉菜单
左右滚动
导航菜单
选项卡
网上赚钱
二级导航
右下角
来源：
懒人建站
|
发布人：懒人建站
|
2010-02-26
|
热度：次
|
收 藏
|
报 错
上一篇：
基于jquery弹出层插件Lee dialog1.0
下一篇：
只半透明背景不透明文字的CSS写法
相关代码
ul/LI结构的隔行换色及鼠标滑过变色
有选中隔行变色鼠标划过变色表格特效
JS实现同页面多table隔行换色
可以排序的table表格并有分页功能
具备排序功能的表格(JS+CSS+table)
JS方法隔行换色代码
当前子类
导航菜单
焦点幻灯片
广告代码
网页特效
jquery 特效
滚动代码
qq在线客服代码
选项卡代码
栏目热点
基于jQuery弹出层有9种效果
基于jQuery的弹出层
基于jQuery弹出层插件thickbox
摄影网站照片展示jquery特效(图片组展示
Jquery点击登录按钮弹出登录层
jquery弹出层插件jquery.msgbox5.0
jQuery点击左右滚动产品图片展示代码
仿wordpress 3D旋转标签云JS代码
QQ空间的弹出层效果（可鼠标移动可载入
基于jQuery的图片展示简洁版
懒人建站
相关
最新
随机
标签
相关文章
ul/LI结构的隔行换色及鼠标滑过变色
有选中隔行变色鼠标划过变色表格特效
JS实现同页面多table隔行换色
可以排序的table表格并有分页功能
具备排序功能的表格(JS+CSS+table)
JS方法隔行换色代码
最新文章
为网站增加圣诞节祝福动画百度的圣诞老人动画
日期时间带星期农历js代码特效
仿腾讯|新浪微博的文本向下滚动JS特效代码
向上逐行滚动JS代码文本特效，鼠标划过暂停
基于jQuery弹出窗口插件特效AsyncBox-v1.2.6
向左滚动的文字特效JS代码
向上滚动的文字特效JS代码
基于jQuery弹出层插件thickbox
仿wordpress 3D旋转标签云JS代码
摄影网站照片展示jquery特效(图片组展示)
随机推荐
仿百度纯JS日历 带农历
微软首页竖向TAB滑动门
最简洁的用户控制改变字体大小JS代码
一个页面可以使用多次的选项卡
可设置一天弹一次的弹出新窗口JS代码
点击展开全部内容DIV层
点击input输入框弹出选择层(基于jquery)
只半透明背景不透明文字的CSS写法
年/月/日三级联动JS代码
文本向上滚动可指定间隔时间
热门标签
jQuery
下拉菜单
左右滚动
导航菜单
选项卡
网上赚钱
二级导航
右下角
JS代码
CSS技巧
设计理论
自动滚动
QQ客服
界面设计
JS
SEO
jQuery弹窗
QQ
kingcms
jQuery提示层
jQuery
|
jquery特效
|
jQuery弹出层
|
JS代码
|
js特效代码大全
|
JS广告代码
|
下拉菜单代码
|
QQ客服
|
html+css
Copyright © 2008-2009
懒人建站
www.51xuediannao.com 版权所有
Powered by
懒人建站
备案号：豫ICP备09003854号
登 录
|
注 册
懒人建站
