javascript学习实录之七（实现鼠标移动上去后表格颜色变化） -- 刘小小尘

最新推荐文章于 2015-05-08 15:07:29 发布

刘啸尘-勤奋的小小尘

最新推荐文章于 2015-05-08 15:07:29 发布

阅读量1k

点赞数

分类专栏： javascript 学习实录

本文链接：https://blog.csdn.net/liuxiaochen123/article/details/8917648

版权

javascript 学习实录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

废话不说，直接上代码，css部分，实在是无力，简单搞搞样式，意思到就好

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title></title>
    <style type="text/css">
        table {
            border: blue solid 1px ;
        }
        table tr {
            border: aqua solid 1px;
            background-color: blueviolet;
        }
        .one {
            background-color: #33FFCC;
        }
        .two {
            background-color: #FFFF66;
        }
        .over {
            background-color: brown;
        }
    </style>

    <script type="text/javascript">
        var name;
        function trcole() {
            var tabNode = document.getElementsByTagName("table")[0];
            var trs = tabNode.rows;
            for(var x=1; x<trs.length; x++) {
                if(x % 2 ==1) {
                    trs[x].className = "one";
                } else {
                    trs[x].className = "two";
                }

                trs[x].onmouseover = function() {
                    name = this.className;
                    this.className = "over";
                }
                trs[x].onmouseout = function () {
                    this.className = name;
                }

            }
        }
        window.onload = trcole;
    </script>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th><a href="javascript:void(0)" οnclick="sortTab()">年龄</a></th>
            <th>地址</th>
        </tr>

        <tr>
            <td>张三11</td>
            <td>35</td>
            <td>北京</td>
        </tr>

        <tr>
            <td>张三22</td>
            <td>24</td>
            <td>北京</td>
        </tr>

        <tr>
            <td>张三33</td>
            <td>68</td>
            <td>北京</td>
        </tr>

        <tr>
            <td>张三44</td>
            <td>90</td>
            <td>北京</td>
        </tr>
    </table>
</body>
</html>

刘啸尘-勤奋的小小尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习实录之七（实现鼠标移动上去后表格颜色变化） -- 刘小小尘

废话不说，直接上代码，css部分，实在是无力，简单搞搞样式，意思到就好 table { border: blue solid 1px ; } table tr { border: aqua solid 1px; background-color: b
复制链接

扫一扫