鼠标移到某一行某一行变色鼠标移开恢复-CSDN博客

这好像是周一还是周二的课堂作业

吃完午饭在思考这个东西怎么做

感觉超有感觉的

虽然不是很炫酷，但是效果很漂亮

<div>
    javascript综合练习二
</div>
<div>
    <table>
        <tr>
            <th>序号</th><th>姓名</th><th>生日</th><th>性别</th><th>联系电话</th><th>操作</th>
        </tr>
        <tr>
            <td>1</td><td>张三</td><td>1992-03-03</td><td>男</td><td>13312345555</td><td><a href="#">查看</a></td>
        </tr>
        <tr>
            <td>2</td><td>丽萨</td><td>1992-03-15</td><td>女</td><td>13312666234</td><td><a href="#">查看</a></td>
        </tr>
        <tr>
            <td>3</td><td>王湾</td><td>1993-03-02</td><td>男</td><td>13312341488</td><td><a href="#">查看</a></td>
        </tr>
        <tr>
            <td>4</td><td>张建军</td><td>1996-12-03</td><td>男</td><td>13312341234</td><td><a href="#">查看</a></td>
        </tr>
        <tr>
            <td>5</td><td>玛娃</td><td>1992-05-03</td><td>女</td><td>13312341234</td><td><a href="#">查看</a></td>
        </tr>
        <tr>
            <td>1</td><td>呵呵呵</td><td>1992-10-03</td><td>男</td><td>13312341234</td><td><a href="#">查看</a></td>
        </tr>
    </table>
</div>
<button οnclick="settable()">设置表格样式</button>
<ul>表格要求:
    <li>表格加上边框,宽度为1px,直线,颜色#D3D3D3</li>
    <li>表格总宽度800px, 第一行背景色为#87CEFA,后面的奇数行为#E0FFFF, 偶数行为#ADD8E6</li>
    <li>鼠标移入到表格中,除了第一行以外,其它数据行背景色被变为#FFA07A,离开该行后颜色恢复</li>
</ul>


<script>
    function settable(){
        var mytable = document.getElementsByTagName('table')[0];

        mytable.style.border = '1px solid #D3D3D3';
        mytable.style.borderCollapse = 'collapse';
        mytable.style.width = '800px';

        for(var i=0; i<mytable.rows.length; i++){
            //给出每行的背景色
            if(i==0){
                mytable.rows[0].style.backgroundColor = '#87CEFA';
            }else{
                // 每行在鼠标移入时改变背景色
                mytable.rows[i].onmouseover = function(){
                    this.style.backgroundColor = '#FFA07A';
                }


                //设置奇数行和偶数行不同的背景色
                if(i%2==0){
                    mytable.rows[i].style.backgroundColor = '#ADD8E6';
                    // 每行在鼠标移出时恢复背景色
                    mytable.rows[i].οnmοuseοut=function(){
                        this.style.backgroundColor = '#ADD8E6';
                    }
                }else{
                    mytable.rows[i].style.backgroundColor = '#E0FFFF';
                    // 每行在鼠标移出时恢复背景色
                    mytable.rows[i].οnmοuseοut=function(){
                        this.style.backgroundColor = '#E0FFFF';
                    }
                }
            }


            //给出格子的边框
            for(var j=0; j<mytable.rows[i].cells.length; j++){
                mytable.rows[i].cells[j].style.border = '1px solid #D3D3D3';
            }
        }

    }