자 바스 크 립 트 동작 표 칸 막 이 변색

3081 단어 JavaScript
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var oTab = document.getElementById("tb1");

            var oldColor = "";

            /*--------------------------  --  ------------------------------*/

            // var name = oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML;

            /*

                  

            1.  

             tBodies.tHead,tFoot,rows,cells

             2.    

                     

             3.      

            // alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);

            // alert(name);

            */

            /*--------------------------  --  ------------------------------*/



            for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {



                oTab.tBodies[0].rows[i].onmouseover = function () {

                    //          oldColor   

                    oldColor = this.style.background;

                    this.style.background = "green";

                }

                oTab.tBodies[0].rows[i].onmouseout = function () {

                    // oldColor          

                    this.style.background = oldColor;



                }

                //

                if (i % 2) {

                    //    

                    oTab.tBodies[0].rows[i].style.background = "#CCC";

                }

            }

        }

    </script>

</head>

<body>

    <table id="tb1" border="1" style="width: 500px;">

        <thead>

            <tr>

                <td>ID</td>

                <td>  </td>

                <td>  </td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>Cupid</td>

                <td>66</td>

            </tr>

            <tr>

                <td>2</td>

                <td>Fly</td>

                <td>45</td>

            </tr>

            <tr>

                <td>3</td>

                <td>Sky</td>

                <td>23</td>

            </tr>

            <tr>

                <td>4</td>

                <td>Windy</td>

                <td>98</td>

            </tr>

            <tr>

                <td>5</td>

                <td>Snow</td>

                <td>09</td>

            </tr>

        </tbody>

    </table>

</body>

</html>


좋은 웹페이지 즐겨찾기