javascript表格行高亮显示

最新推荐文章于 2024-03-01 16:22:18 发布

啊哈前端

最新推荐文章于 2024-03-01 16:22:18 发布

阅读量901

点赞数

分类专栏： javascript

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!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.οnlοad=function(){
        var trE=document.getElementById("lightBar").rows,//获取表格的每一行
                trLen=trE.length,   //获取被遍历的节点长度
                i=0;
        for(;i<trLen;i++){  //遍历被提示的对象
            var trEi=trE[i];
            trEi.οnmοusemοve=function(){
                this.style.backgroundColor="#a5e5aa"; //光棒样式
            }
            trEi.οnmοuseοut=function(){ //还原初始样式
                this.style.backgroundColor="#fff";
            }
        }
    };
</script>
</body>
</html>