针对table,div隔行变色的JS方法 -- [表格特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

针对table,div隔行变色的JS方法

网络 2009/8/24 8:24:00 深山行者字体:大中小浏览 16049

针对table,div隔行变色的JS方法

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
</head> 
<style> 
.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px; width:50%} 
.mytable ul li { padding-top:7px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;} 
.mytable ul li a{ float:left} 
.mytable ul li span{ float:right} 
.mytable ul li.t1 {background-color:#EFFEDD;}/* 第一行的背景色 */ 
.mytable ul li.t2{background-color:#ffffff;}/* 第二行的背景色 */ 
.mytable ul li.t3 {background-color:#D2FCA0;}/* 鼠标经过时的背景色 */ 
</style> 
<br /><br /><br /> 
<div class=mytable id=tab> 
<ul> 
<li><a href="#">这个是第1行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第2行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第3行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第4行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第5行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第6行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第7行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第8行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
<li><a href="#">这个是第9行的文字，大家看清楚了</a><span>2007-11-20</span></li> 
</ul></div><script type="text/javascript"> 
 
</script>

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
</head> 
<style> 
.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;} 
.mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;} 
.mytable ul li.t1 {background-color:#EFFEDD;}/* 第一行的背景色 */ 
.mytable ul li.t2{background-color:#ffffff;}/* 第二行的背景色 */ 
.mytable ul li.t3 {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new.gif) #D2FCA0 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}/* 鼠标经过时的背景色 */ 
</style> 
<br /><br /><br /> 
<div align="center"> 
<div class=mytable id=tab> 
<ul> 
<li><a href="#">这个是第1行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第2行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第3行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第4行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第5行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第6行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第7行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第8行的文字，大家看清楚了</a></li> 
<li><a href="#">这个是第9行的文字，大家看清楚了</a></li> 
</ul></div><script type="text/javascript"> 
 
</script>

前一页:利用javascript鼠标经过表格，行与列变色

后一页:可以用作后台的超级强的变色表格

相关阅读: 性感的CSS菜单(Menus); MarkMan 马克鳗，让设计更有爱 (超级给力的页面标注工具); Vista中使用IIS 7.0三个常见问题; 利用javascript静态改变表单指向与提交方式; 盐城市开心假日旅行社有限公司; 微信公众号回复音乐消息或用客服接口推送音乐消息; Photoshop中精典实用技巧; 一行内文本超出指定宽度后用省略号代替

共有0条关于《针对table,div隔行变色的JS方法》的评论: 发表评论

正在加载评论......

返回顶部发表评论

呢称:
表情:
内容:	评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码:

网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: 用javscript实现为表格的每一行自动加上序号; 鼠标放在表格区域内，当前格的一整行和一整列变色; 鼠标经过表格列时变色; javascript表格内移动上下列，可以做成ajax加上动态程序做成上下移动顺序; 利用javascript鼠标经过表格，行与列变色; 针对table,div隔行变色的JS方法

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: asp正则表达式替换HTML源文件里的链接地址; DIV+CSS分页代码,放大镜分页效果; 短信邮件; Div+CSS布局应该注重语义、注重代码的重用性; 深山行者留言系统V1.0 (简称深山留言V1.0); IE6在定义DIV最小高度时出现错误的解决方法

更多标签热门标签

优化变幻 dreawmeaver 用户体验访问量论坛管理系统文章 expression iis DropShadow outerHTML 项目渐隐色彩鼠标界面 Word 跳转 windows 个性万年历框自适应 txt mop word-spacing media 自适应高度物理框移 rnd html 增大考试标签客户端文件夹排序边界重叠复制常用素材 base 工作室思考阴影效果框架二级 tab