用tBodies/rows这些来做表格的隔行变色;配合i%2的if语句实现的;

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload= function () {
            var oTab=document.getElementById('tab1');
            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {
                if(i%2)
                {
                    oTab.tBodies[0].rows[i].style.background="#CCC";
                }
                else
                {
                    oTab.tBodies[0].rows[i].style.background="";
                }
            }
        }
    </script>
</head>
<body>
<table id="tab1" border="1px" width="500px">
    <thead>
    <td>ID</td>
    <td>name</td>
    <td>ages</td>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>broszhu</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>zhu</td>
        <td>22</td>
    </tr>
    <tr>
        <td>3</td>
        <td>smile</td>
        <td>22</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bro</td>
        <td>25</td>
    </tr>
    <tr>
        <td>5</td>
        <td>alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>6</td>
        <td>alian</td>
        <td>26</td>
    </tr>
    </tbody>
</table>

</body>
</html>

然后在做鼠标移入的高亮效果;

思路是在for循环中加

oTab.tBodies[0].rows[i].onmouseover=function()
{
    this.style.background="red"
};

oTab.tBodies[0].rows[i].onmouseout=function()
{
    this.style.background=""
};

这些代码来做onmouseover和onmouseout的效果;

全部代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload= function () {
            var oTab=document.getElementById('tab1');


            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {
                oTab.tBodies[0].rows[i].onmouseover=function()
                {
                    this.style.background="red"
                };

                oTab.tBodies[0].rows[i].onmouseout=function()
                {
                    this.style.background=""
                };
                if(i%2)
                {
                    oTab.tBodies[0].rows[i].style.background="#CCC";
                }
                else
                {
                    oTab.tBodies[0].rows[i].style.background="";
                }
            }
        }
    </script>
</head>
<body>
<table id="tab1" border="1px" width="500px">
    <thead>
    <td>ID</td>
    <td>name</td>
    <td>ages</td>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>broszhu</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>zhu</td>
        <td>22</td>
    </tr>
    <tr>
        <td>3</td>
        <td>smile</td>
        <td>22</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bro</td>
        <td>25</td>
    </tr>
    <tr>
        <td>5</td>
        <td>alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>6</td>
        <td>alian</td>
        <td>26</td>
    </tr>
    </tbody>
</table>

</body>
</html>

但是这个效果,有BUG,等我们全部移进和移出的时候,表格的背景就全部清空了;

解决思路:

我们存一个变量 oldcolor,这个是原来的颜色;等我们鼠标移近的时候,先让olccolor变成这个高亮的颜色;等我们鼠标移出的时候,再赋值到oldcolor;这样就可以了;

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload= function () {
            var oTab=document.getElementById('tab1');
            var oldColor="";


            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {
                oTab.tBodies[0].rows[i].onmouseover=function()
                {
                    oldColor=this.style.background;
                    this.style.background="red";
                };

                oTab.tBodies[0].rows[i].onmouseout=function()
                {
                    this.style.background=oldColor;
                };
                if(i%2)
                {
                    oTab.tBodies[0].rows[i].style.background="#CCC";
                }
                else
                {
                    oTab.tBodies[0].rows[i].style.background="";
                }
            }
        }
    </script>
</head>
<body>
<table id="tab1" border="1px" width="500px">
    <thead>
    <td>ID</td>
    <td>name</td>
    <td>ages</td>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>broszhu</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>zhu</td>
        <td>22</td>
    </tr>
    <tr>
        <td>3</td>
        <td>smile</td>
        <td>22</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bro</td>
        <td>25</td>
    </tr>
    <tr>
        <td>5</td>
        <td>alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>6</td>
        <td>alian</td>
        <td>26</td>
    </tr>
    </tbody>
</table>

</body>
</html>

“`