表格隔行变色案例

最新推荐文章于 2020-11-21 13:08:46 发布

weixin_34082177

最新推荐文章于 2020-11-21 13:08:46 发布

阅读量366

点赞数

文章标签： java 移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/lujieting/p/10058716.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 500px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            cursor: pointer;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>课程</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                1
            </td>
            <td>柳岩</td>
            <td>语文</td>
            <td>100</td>

        </tr>
        <tr>
            <td>
                2
            </td>
            <td>苍老师</td>
            <td>日语</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                3
            </td>
            <td>凤姐</td>
            <td>营销学</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                4
            </td>
            <td>芙蓉姐姐</td>
            <td>数学</td>
            <td>10</td>
        </tr>
        <tr>
            <td>
                5
            </td>
            <td>佐助</td>
            <td>英语</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                6
            </td>
            <td>卡卡西</td>
            <td>体育</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                7
            </td>
            <td>乔峰</td>
            <td>体育</td>
            <td>100</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="../DOM/commer.js"></script>
<script>
    var trs=ver("j_tb").getElementsByTagName("tr");
    for(var i=0;i<trs.length;i++){
        trs[i].style.backgroundColor=i%2==0?"red":"yellow";
        //鼠标进入
        trs[i].οnmοuseοver=mouseoverHandle;
        //鼠标离开
        trs[i].οnmοuseοut=mouseoutHandle;
    }
    var lastColor="";//先保存原来的颜色，鼠标离开后可还原
    function mouseoverHandle() {
        lastColor=this.style.backgroundColor;
        this.style.backgroundColor="blue";
    }
    function mouseoutHandle() {
        this.style.backgroundColor=lastColor;
    }

</script>
</body>
</html>

转载于:https://www.cnblogs.com/lujieting/p/10058716.html

weixin_34082177

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格隔行变色案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; ...
复制链接

扫一扫