代码驿站移动版

频道导航

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

您可能感兴趣的文章:

相关文章