上一章节我们使用原生JSS实现了全选、不选、反选效果,这一这章节我们来实现隔行异色效果,隔行异色的意思是某表格中奇数行和奇数行的颜色相同,偶数行和偶数行的颜色要相同,奇数行和偶数行的颜色不同,奇偶相间达到隔行异色的效果。

隔行异色的效果图如上,奇数行背景颜色为antiquewhite,偶数行背景颜色为aqua奇偶相间,当鼠标移动到某一行的时候,该行背景颜色变红,鼠标移除时恢复原来的颜色。
页面的html代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>隔行异色</title> <style> div { padding: 20px; margin: 5px; border: solid 1px
#000; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div>
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
<div></div> </body> </html>

页面的最初轮廓如此,存在11个div,每个div定义了对应的样式,控制div具有表格行的效果,但是这时候的每一行背景颜色还只是单调的透明色,接下来我们编写代码实现奇偶相间异色效果。

首先需要定义奇数行和偶数行以及当前选中行的背景颜色。
.odd { background-color: aqua; } .even { background-color: antiquewhite; }
.active { background-color: red; }
在css中定义了三个class的样式,每个class的样式只定义了背景颜色,现在我们来看看js代码怎么实现的。
var BgChange = function () { this.aDiv =
document.getElementsByTagName("div"); this.init = function() { for(var i = 0; i
< this.aDiv.length; i++) { if(i%2 == 0) { //偶数行 this.aDiv[i].className = "odd";
} else { //奇数行 this.aDiv[i].className = "even"; } } }; }

一如既往的,该BgChange类具有aDiv类成员属性,记录每一行div的节点,在init方法中循环遍历每一个div,如果当前行号除以2等于0,则赋值class为odd,否则class赋值为even。

接下来我们应该监听鼠标的移入和移除事件,当鼠标移入某一行时,背景颜色变为红色,移除时还原为原来的颜色,代码显示如下:
this.changeBgColor = function () { oldClassName = ""; //循环遍历每一个div for(var i
= 0; i < this.aDiv.length; i++) { //给每一行注册鼠标移入事件 this.aDiv[i].onmouseover =
function () { oldClassName = this.className; this.className = "active"; };
this.aDiv[i].onmouseout = function () { this.className = oldClassName; } } };

该方法中用了一个oldClassName来记录当前行的class,当鼠标移除厨房onmounseout事件的时候即可还原原来的颜色,完整的BgChange类代码如下:
var BgChange = function () { this.aDiv =
document.getElementsByTagName("div"); this.init = function() { for(var i = 0; i
< this.aDiv.length; i++) { if(i%2 == 0) { //偶数行 this.aDiv[i].className = "odd";
} else { //奇数行 this.aDiv[i].className = "even"; } } }; this.changeBgColor =
function () { oldClassName = ""; //循环遍历每一个div for(var i = 0; i <
this.aDiv.length; i++) { //给每一行注册鼠标移入事件 this.aDiv[i].onmouseover = function ()
{ oldClassName = this.className; this.className = "active"; };
this.aDiv[i].onmouseout = function () { this.className = oldClassName; } } }; }
驱动代码如下:
window.onload = function () { var bgChange = new BgChange(); bgChange.init();
bgChange.changeBgColor(); }

技术
©2019-2020 Toolsou All rights reserved,
TP6验证器的使用示例及正确验证数据自宣布投资比特币以来 特斯拉市值蒸发逾2000亿美元华为认证HCIA-AI人工智能Java基础(冒泡排序)IAR安装使用教程GDOI2019 游记关于过年PYTHON入门期末复习汇总蚂蚁集团董事长井贤栋安抚员工:公司终究会上市的王者荣耀背景故事整合