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

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

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

针对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分页放大效果; 纯div+css制作的弹出菜单-04; ASP利用fso读取文件夹里所有文件的名字; 做好的网站把http改成https申请SSL域名证书; 更变态的页面右击失效代码,选择,全选,全部失效; 实现iis6与iis7环境下支持mp4视频随意拖动、预览播放、边下载边播放; 实现windows关机效果代码

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; 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还有其它的吗

更多>>随机抽取信息: uni-app自定义组件调用; ASP版通过身份证信息获取对应的生日性别年龄; 微信小程序转uni-app项目; 旅行社线路主题默认模板3; 鼠标放在表格区域内，当前格的一整行和一整列变色; ASP常用内置函数(下)

更多标签热门标签

优化伪类 rss 相册 javascri 字节数右击 eof 深山行者V1.2旅行社网站管理系统 V3.1 定制逗号焦点利用position把div放在flash上 xhtml 下拉框 link 台历验证叛断选择框 web dt 左右错误 2.0 面板风格数据 button png24 height 倒计时 Google 固定网页加密复选框快捷键策划方法 SEO 防止浏览器 display 破解 important 告柱状指向