大多数人不知道的表格其他写法的onmouseover效果 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script>
    window.onload=function(){
        var oTab=document.getElementById("tab1");
        var oldColor="";
        // alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
        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="green";
            }
            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='1' width="500px">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>12</td>
            </tr>
            <tr>
                <td>1</td>
                <td>李四</td>
                <td>34</td>
            </tr>
            <tr>
                <td>1</td>
                <td>王五</td>
                <td>40</td>
            </tr>
            <tr>
                <td>1</td>
                <td>李四</td>
                <td>34</td>
            </tr>
            <tr>
                <td>1</td>
                <td>王五</td>
                <td>40</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

posted @ 2017-12-16 21:35  IT文艺女  阅读(232)  评论(0)    收藏  举报