表格偶数行变色——>小案例

最新推荐文章于 2023-06-13 16:50:54 发布

公有云私有云

最新推荐文章于 2023-06-13 16:50:54 发布

阅读量461

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/81735595

版权

实现的方法是：通过dom树API操作

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格偶数行变色</title>
    <style>
        #data {
            width: 600px;
        }
        #data,td,th {
            border-collapse: collapse;
            border: 1px solid #aaaaaa;
        }
        th,td {
            height: 28px;
        }
        #data thead {
            background-color: #333399;
            color: #ffffff;
        }
        #data .blue1 {
            background-color: #CCCCFF;
        }
    </style>
</head>
<body>
    <table id="data">
        <thead>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>入职时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>$3500</td>
                <td>2010-10-25</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>$3400</td>
                <td>2010-12-1</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>King</td>
                <td>$5900</td>
                <td>2009-08-17</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Scott</td>
                <td>$3800</td>
                <td>2012-11-17</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Smith</td>
                <td>$3100</td>
                <td>2014-01-27</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Allen</td>
                <td>$3700</td>
                <td>2011-12-05</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
        </tbody>
    </table>
</body>
    <script>
        window.$ = HTMLElement.prototype.$ = function(selector){
            return (this==window?document:this).querySelectorAll(selector);
        }
        var tbody = $("table tbody")[0];
        for (var i= 0,n= 0,len=tbody.childNodes.length;i<len;i++){
            if(tbody.childNodes[i].nodeName=="TR"){
                n++;
                if (n%2==0){
                    tbody.childNodes[i].className="blue1";
                }
            }
        }
    </script>
</html>

公有云私有云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格偶数行变色——>小案例

实现的方法是：通过dom树API操作代码实现如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表格偶数行变色&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫