登录模块加载中...

龙盟编程博客 | 无障碍搜索 | 云盘搜索神器

快速搜索

主页 > web编程 > div+css/html >

css expression 隔行换色

时间:2014-06-12 16:03来源:网络整理作者:网络点击: 次

分享到：

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需刷新才能执行]

上一篇：javascript 获取特定的 CSS属性值
下一篇：提高CSS网页渲染效率的11点注意事项

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的CSS架构_仅加载自己需要的CSS

css实现气泡框效果(实例加图解)

css实现气泡

精彩文章

热点文章

热门标签

检测网络 binlog php字符编码目录权限缩放大小 ASP.NET页面 wait() 异步上传 GAE 字面量对象已连接 php php调用快捷方式手机端图像处理删除分区表 ClientAliveI 扑克发牌 DOM对象文字监控显示图表 optionParser 一招 mysql日志用户安全 mysql常用命令梯形法跟老齐学Python 验证用户名 select标签 xapian 网站定时任务 CHTSli java调用c函数 GIS地图 EXE2BAT 动画 Repeater控件 kvm 自动生成密码微软精灵 select查询器金山快盘 s:date Windwos服务器常引用 url路由合并表路径新窗口 webservice客户实用操作斐波找不到IP ACCESS fga samba 反应静态编译销毁目录 p

赞助商链接

关于我们 - 联系我们 - 广告服务 - 意见反馈 - 网站地图 - 版权声明 - 人才招聘 - 帮助

@CopyRight 2002-2008, 1SOHU.COM, Inc. All Rights Reserved QQ:1010969229

京ICP备18042785号-1