100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 表格元素的快捷获取以及隔行变色 鼠标移入变色案例

表格元素的快捷获取以及隔行变色 鼠标移入变色案例

时间:2019-10-31 08:48:44

相关推荐

表格元素的快捷获取以及隔行变色 鼠标移入变色案例

要求:以下列代码为基础,添加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;,当鼠标移出后,背景色赋值为该值,以保证移出鼠标后黑白相间的背景色效果不变。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。