表格元素的快捷获取以及隔行变色、鼠标移入变色案例

最新推荐文章于 2018-10-31 19:11:23 发布

转载最新推荐文章于 2018-10-31 19:11:23 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/f6056/p/9284320.html

本文介绍如何使用JavaScript实现HTML表格的隔行变色效果，并在鼠标悬停时改变行背景色，鼠标移出后恢复原有效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：以下列代码为基础，添加JS代码，令表格实现隔行变色效果，并且实现鼠标移入表格，该行表格背景色变为绿色，移出表格后表格恢复为原隔行变色形式的背景色。

<table id='tab1'  border="1" width="500" align="center" >
    <thead>
        <tr><td>ID</td><td>姓名</td><td>年龄</td></tr>
    </thead>
    <tbody>
        <tr><td>A</td><td>阿童木</td><td>3</td></tr>
        <tr><td>B</td><td>机器猫</td><td>4</td></tr>
        <tr><td>C</td><td>小叮当</td><td>5</td></tr>
        <tr><td>D</td><td>海雅</td><td>6</td></tr>
        <tr><td>E</td><td>祖鲁</td><td>7</td></tr>
    </tbody>
</table>

完成后的JS代码

window.onload=function()
{
    var oTab=document.getElementById('tab1');
    //获取table中的目标行
    var aTr=oTab.tBodies[0].rows;
    var oldColor="";
    for(var i=0;i<aTr.length;i++)
    {
        //隔行变色
        if(i%2)
        {
            aTr[i].style.background="#ccc";
        }
        else
        {aTr[i].style.background="";}
        
        aTr[i].onmouseover=function()
        {   //获取鼠标移入行的原本背景色
            oldColor=this.style.background;
            this.style.background="green";
        }
        aTr[i].onmouseout=function()
        {
           this.style.background=oldColor;
        }
    }
                 
};