javascript表格行高亮显示

来源：互联网发布：python抢票脚本编辑：程序博客网时间：2024/05/29 15:30
<!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>
0 0