css expression 隔行换色 - phpStudy

css expression 隔行换色

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> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </td>  
</tr>  
<tr>  
<td> </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> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
</table> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

«
»

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类

快速导航

PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3