要求:以下列代码为基础,添加JS代码,令表格实现隔行变色效果,并且实现鼠标移入表格,该行表格背景色变为绿色,移出表格后表格恢复为原隔行变色形式的背景色。
<table id='tab1' border="1" width="500" align="center" ><thead><tr><td>ID</td><td>姓名</td><td>年龄</td></tr></thead><tbody><tr><td>A</td><td>阿童木</td><td>3</td></tr><tr><td>B</td><td>机器猫</td><td>4</td></tr><tr><td>C</td><td>小叮当</td><td>5</td></tr><tr><td>D</td><td>海雅</td><td>6</td></tr><tr><td>E</td><td>祖鲁</td><td>7</td></tr></tbody></table>
完成后的JS代码
window.οnlοad=function(){var oTab=document.getElementById('tab1');
//获取table中的目标行var aTr=oTab.tBodies[0].rows;var oldColor="";for(var i=0;i<aTr.length;i++){
//隔行变色if(i%2){aTr[i].style.background="#ccc";}else{aTr[i].style.background="";}aTr[i].onmouseover=function(){ //获取鼠标移入行的原本背景色oldColor=this.style.background;this.style.background="green";}aTr[i].onmouseout=function(){this.style.background=oldColor;}}};
编辑程序时出现的问题: 1、鼠标移出后,该行恢复原来的黑白相间的效果没有做对。需要在aTr[i].onmouseover后面的函数中增加获取鼠标移入前的背景色:oldColor=this.style.background;,当鼠标移出后,背景色赋值为该值,以保证移出鼠标后黑白相间的背景色效果不变。