css expression 隔行换色 - HTML/CSS编程经验-OGeek|极客世界-中国程序员成长平台

设为首页
点击收藏
手机版

手机扫一扫访问
迪恩网络手机版
关注官方公众号

微信扫一扫关注
迪恩网络公众号

登陆注册

快速发帖
客服电话

点击联系客服
在线时间：8:00-16:00

客服电话

132-9538-2358

电子邮件
[email protected]
APP下载

迪恩网络APP

随时随地掌握行业动态
官方微信

扫描二维码

关注迪恩网络微信公众号
问题反馈
返回顶部

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

css expression 隔行换色

原作者: [db:作者] 来自: [db:来源] 收藏邀请

css实现的，用expression但在实际中部建议使用，占用资源而且firefox浏览器不支持

<style>  .db tr{  background-color:expression('#000000,#333333,#555555,#777777,#999999,#bbbbbb,#dddddd,#ffffff'.split(',')[rowIndex%8]);  }  </style>  <table width="500" border="1" class="db">  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  <tr>  <td>&nbsp;</td>  </tr>  </table>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

就两颜色的时候可以改这这样
<style>
.db tr{
background-color:expression('#abcdef,#123456'.split(',')[rowIndex%2]);
}
</style>

<style> .db { border-collapse:collapse;} .db tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); } </style> <table width="100%" border="1" class="db"> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

如果真想用，可以用下面的js写的

<table id="list" width="300">     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>     <tr>         <td>&nbsp;</td>     </tr>  </table>  <script type="text/javascript">    </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

该文章已有0人参与评论

请发表评论

全部评论

专题导读

上一篇：

提高CSS网页渲染效率的11点注意事项发布时间：2022-02-05

下一篇：

javascript 获取特定的 CSS属性值发布时间：2022-02-05

热门推荐

热门话题

阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap