您的位置：首页 > Web前端 > JavaScript

javascript表格行高亮显示

2016-01-08 11:13 736 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航