当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS案例四：表格的隔行换色以及高亮显示

JS案例四：表格的隔行换色以及高亮显示

2018年08月31日  | 移动技术网IT编程  | 我要评论

林粮乩,魔兽世界游学者军需官,倩女幽魂雷峰塔解开疑团

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload = function() {
                var oldcolor;
                var tblele = document.getelementbyid("tbl");
                var len = tblele.tbodies[0].rows.length;
                for(var i = 0;i<len;i++) {
                    if(i%2==0) {
                        tblele.tbodies[0].rows[i].style.backgroundcolor = "pink";
                        //添加鼠标经过事件
                        tblele.tbodies[0].rows[i].onmouseover = function() {
                            oldcolor = this.style.backgroundcolor;
                            this.style.backgroundcolor = "blue";
                        }
                        // 添加鼠标离开事件
                        tblele.tbodies[0].rows[i].onmouseout = function() {
                            this.style.backgroundcolor = oldcolor;
                        }
                    }else{
                        tblele.tbodies[0].rows[i].style.backgroundcolor = "gold";
                        //添加鼠标经过事件
                        tblele.tbodies[0].rows[i].onmouseover = function() {
                            oldcolor = this.style.backgroundcolor;
                            this.style.backgroundcolor = "blue";
                        }
                        // 添加鼠标离开事件
                        tblele.tbodies[0].rows[i].onmouseout = function() {
                            this.style.backgroundcolor = oldcolor;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">
            <thead>
                <tr>
                    <th>编号</th><th>姓名</th><th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>马六</td>
                    <td>14</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>伍六七</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>梅花十三</td>
                    <td>17</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网