欢迎来到代码驿站！

HTML代码

当前位置：首页 > 网页前端 > HTML代码

css expression 隔行换色

时间：2021-03-13 09:46:57|栏目：HTML代码|点击：次

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需再刷新一下页面才能执行]

上一篇：快速制作CSS导航菜单教

栏目：HTML代码

下一篇：Css浏览器兼容的解决方法

本文标题：css expression 隔行换色

本文地址：http://www.codeinn.net/misctech/79657.html

更多HTML代码

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站版权所有