css expression 隔行换色

た入场券 2021-11-22 23:34 370阅读 0赞

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>

就两颜色的时候可以改这这样

<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>

如果真想用，可以用下面的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>

![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211122/5c200ed34e58437aaf5987b7d8c426aa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，370人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery实现表格隔行换色

> 黑马网课案例使用JQuery实现表格的各行换色注意： :gt(index) 为过滤选择器，选择大于指定索引的元素 :odd奇数，:enen偶数，都是

快来打我*/ 2023年09月23日 16:29/ 0 赞/ 73 阅读

相关 Layui列表隔行换色

> <table> > <tbody> > <tr> > <td> <p><strong>Layui常用总结</strong></p> </td> >

阳光穿透心脏的1/2处/ 2023年01月07日 12:22/ 0 赞/ 509 阅读

相关 css隔行换色和鼠标划过变色

css table隔行换色和鼠标划过变色 tr{ background: white;} tr:nth-child(2n){ background:

女爷i/ 2022年08月19日 04:49/ 0 赞/ 207 阅读

相关 CSS之Table表格隔行换色之简洁版

效果如下： ![图片][20170207161340222] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

浅浅的花香味﹌/ 2022年07月12日 02:19/ 0 赞/ 281 阅读

相关 js之表格隔行换色

步骤分析：第一步：确定事件(onload)并为其绑定一个函数第二步：书写函数(获取表格) 第三步：获取tbody里面的行数第四步：对tbody里面的行进行

╰+攻爆jí腚メ/ 2022年05月31日 08:51/ 0 赞/ 284 阅读

相关用jp进行隔行换色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Love The Way You Lie/ 2022年05月15日 07:17/ 0 赞/ 259 阅读

相关 JavaScript jQuery隔行换色

<script type="text/javascript"> $(function() { //隔行变色 $("changeColor tr:

梦里梦外;/ 2022年04月03日 05:23/ 0 赞/ 323 阅读

相关 js隔行换色

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

r囧r小猫/ 2022年03月19日 02:38/ 0 赞/ 316 阅读

相关 css expression 隔行换色

css实现的，用expression但在实际中部建议使用，占用资源而且firefox浏览器不支持 <style> .db tr{ backgr

た入场券/ 2021年11月22日 23:34/ 0 赞/ 371 阅读

相关 jQuery中实现隔行换色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ

「爱情、让人受尽委屈。」/ 2021年09月18日 22:48/ 0 赞/ 411 阅读