css expression 隔行换色

た入场券 2021-11-22 23:34 357阅读 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 条评论，357人围观）

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

相关阅读

相关 Layui列表隔行换色

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

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

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

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

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

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

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

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

相关 js之表格隔行换色

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

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

相关用jp进行隔行换色

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

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

相关隔行换色并且鼠标指向行变色的表格

一应用对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。二代码 <s

小咪咪/ 2022年05月12日 00:36/ 0 赞/ 273 阅读

相关 JavaScript jQuery隔行换色

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

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

相关 js隔行换色

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

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

相关 css expression 隔行换色

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

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

相关 jQuery中实现隔行换色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ

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