javascript表格行高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格行高亮效果</title>
    <style>
        h2,h5,#tooltipMsg,p {
            white-space: nowrap; /*规定文本不换行*/
        }
        td {
            border: 1px solid #ccc;
            height: 50px;
            text-align: center;
            font-size: 10pt;
            padding: 2px;
        }
    </style>
</head>
<body>
    <table id="lightBar" border="1" width="500">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
    </table>
<script>
    window.onload=function(){
        var trE=document.getElementById("lightBar").rows,//获取表格的每一行
                trLen=trE.length,   //获取被遍历的节点长度
                i=0;
        for(;i<trLen;i++){  //遍历被提示的对象
            var trEi=trE[i];
            trEi.onmousemove=function(){
                this.style.backgroundColor="#a5e5aa"; //光棒样式
            }
            trEi.onmouseout=function(){ //还原初始样式
                this.style.backgroundColor="#fff";
            }
        }
    };
</script>
</body>
</html>

你可能感兴趣的:(javascript表格行高亮显示)