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

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

转载于:https://www.cnblogs.com/f6056/p/9284320.html

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

【Excel行颜色】表格行变色鼠标移动变色【Excel颜色】Worksheet_SelectionChange Color
表格Sheet 右击:查看代码输入控制代码.ctrl+S 点击是,关闭窗口. 请看视频教程: 单元格-行列变色点击表格显示颜色表格定位主要code: Private Sub Worksheet ...
Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白
最主要就是用到属性的绑定 :class (动态绑定多个class) :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',select ...
jquery鼠标移入变色移出恢复
一.需求说明现需要对一个表格的内容部分做下高亮处理:当鼠标放到这一行时,背景色发生改变:当鼠标移出这一行时,恢复这一行的原有背景色.如下图,原来是除了首行以外,带序号的内容部分,奇偶行背景色交替变化 ...
VUE学习（七）自定义列表鼠标移入变色，点击变色（仿el-table实现）
常规列表数据用elementUI的el-table标签即可实现,但有些需要自定义列表数据样式的,则需要手写,这样如何做出和el-table一样的效果呢?一下代码可以实现页面渲染 <div cl ...
鼠标经过下划线 css3,详解css3和伪元素实现鼠标移入时下划线向两边展开
本文主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料,文中先进行了详细的介绍,方便大家理解,而后给出了完整的实例代码让大家可以参考学习,需要的朋友们下面来一起学习学习吧.希望 ...
转，帅气的表格隔行换色+鼠标经过变色、点击变色
源码是: <style type="text/css"><!– #senfe { width: 650px; border-top: #E3E3E3 1px so ...
php 如何获取表格数据类型,使用phpword获取doc中的表格数据
* Created by PhpStorm. * User: parker * Date: 2020/10/18 * Time: 16:09*/namespace common\services;cl ...
js之pc端网页特效，获取元素偏移，获取元素大小，offset和style区别以及案例
offsetLeft和offsetTop获取元素偏移 offset系列属性可以动态获得元素的位置,大小等,不需要我们去看css了,没有right和bottom. 获得元素的距离以带有定位的父盒子为准, ...
.serializeArray()序列化表格元素
(作者:苦行者:撰写时间:2019年7月6日) 1.一般地,我们做增删查改的时候,少不了要获取到页面的数据,然后把它们传递到控制器进行进一步处理,这个步骤很必要,是必不可少的.然而,获取页面数据的方法 ...

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

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

最新文章

热门文章