管理资源吧首页>>>教程>>>编程>>>CSS/HTML教程>>>

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> 
 <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%3C!--%20%0D%0A%20var%20colorArr%20%3D%20new%20Array(%22%23ffffff%22%2C%22%23cccccc%22%2C%22%23999999%22%2C%22%23666666%22%2C%22%23333333%22)%3B%20%0D%0A%20var%20s%20%3D%200%3B%20%0D%0A%20function%20listDoodle()%20%7B%20%20%20%20%20%0D%0A%20%20%20%20var%20list%20%3D%20document.getElementById(%22list%22).getElementsByTagName(%22tr%22)%3B%20%0D%0A%20%20%20%20for%20(var%20i%3D0%3Bi%3Clist.length%20%3Bi%2B%2B%20)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20list%5Bi%5D.style.backgroundColor%20%3D%20colorArr%5Bs%2B%2B%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(s%3D%3D(colorArr.length-1))%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20s%20%3D%200%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%7D%20%0D%0A%20window.onload%20%3D%20listDoodle%3B%20%0D%0A%20%2F%2F--%3E%20%0D%0A%20%3C%2Fscript%3E">

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

教程首页更多教程