表格光棒效果 【js读书笔记】

<h2>表格光棒效果</h2>
		<table id="lghtBar" border="1" width="500" cellspacing="0" cellpadding="0">
			<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>
		</table>

　　

<script type="text/javascript">
		window.onload=function(){
			
			var trE=document.getElementById('lghtBar').rows,
				trLen=trE.length,
				i=0;
			for(;i<trLen;i++){
				var trEi=trE[i];
				trEi.onmousemove=function(event){//设置光棒效果
					//background-color:#a5e5aa
					this.style.backgroundColor="#a5e5aa";
				}
				
				trEi.onmouseout=function(){
					this.style.backgroundColor="#fff";
				}
			}
		};
	</script>