《JS控制表格奇偶数行背景色变换》

引言：

当我们利用html标记标签语言制作出一张普通的信息表格时，为了摆脱单调，提高用户体验，我们可以为其添加各种动态效果，以满足用户在操作表格时所带来的效果乐趣。

内容概括：当鼠标移动到表格上的相关单元行时，其相关行的背景色改变【颜色自定义】，并且单元行背景色的改变会根据表格行的奇偶性来改变，从而产生背景色变换的效果。

内容截图 ：

代码详情：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="卡布奇诺奶茶的独特"><meta name="Keywords" content="表格奇偶数行，奇偶数行背景色，奇偶数"><meta name="Description" content="这里将演示js控制html表格中奇偶数行的背景色，由鼠标事件来触发。"><title>JS控制表格奇偶数行背景色变换</title></head><style type="text/css">#table001{/*表格宽度*/width:56%;/*表格居中*/margin:0 auto;/*表格文本居中*/text-align:center;/*表格文本类型*/font-family:微软雅黑;/*表格内的大写英文字母全部转换为小写字母*/text-transform:lowercase;/*合并单元格*/border-collapse:collapse;}</style><script type="text/javascript" language="javascript">//当鼠标覆盖到相关单元格时所触发的事件function changeOver(elementId){//声明指定相关表元素var table001 = document.getElementById("table001").children[0];//for循环语句for(i=0;i<table001.children.length;i++){//if判断语句if(table001.children[i]==elementId){//奇数行if(i%2==1)//当鼠标覆盖到表格奇数行时，相关单元格背景色变为#CCCCCC色elementId.style.background="#CCCCCC";//偶数行else//当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#F2F2F2色elementId.style.background="#F2F2F2";}}}//当鼠标离开相关单元格时所触发的事件function changeOut(elementId){//当鼠标离开相关表格相关行时，其相关行背景色变为#FFFFFF色elementId.style.background="#FFFFFF";}</script><body><!--table001--> <table id="table001" border="1"><tr style="background:#F2F2F2;"><td>部门</td><td>姓名</td><td>性别</td><td>年龄</td><td>职位</td><td>薪资</td></tr><tr οnmοuseοver="changeOver(this)" οnmοuseοut="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr οnmοuseοver="changeOver(this)" οnmοuseοut="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr οnmοuseοver="changeOver(this)" οnmοuseοut="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr οnmοuseοver="changeOver(this)" οnmοuseοut="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr οnmοuseοver="changeOver(this)" οnmοuseοut="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr οnmοuseοver="changeOver(this)" οnmοuseοut="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr></table></body>
</html>

---------------------------------

感谢您的倾心阅读

《JS控制表格奇偶数行背景色变换》相关推荐

ComeFuture英伽学院——2020年全国大学生英语竞赛【C类初赛真题解析】(持续更新)
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
ComeFuture英伽学院——2019年全国大学生英语竞赛【C类初赛真题解析】大小作文——详细解析
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
信息学奥赛真题解析（玩具谜题）
玩具谜题(2016年信息学奥赛提高组真题) 题目描述小南有一套可爱的玩具小人, 它们各有不同的职业.有一天, 这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的 ...
信息学奥赛之初赛第1轮讲解（01-08课）
信息学奥赛之初赛讲解 01 计算机概述系统基本结构信息学奥赛之初赛讲解 01 计算机概述系统基本结构_哔哩哔哩_bilibili 信息学奥赛之初赛讲解 02 软件系统计算机语言进制转换信息 ...
信息学奥赛一本通习题答案（五）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通习题答案（三）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通提高篇第六部分数学基础相关的真题
第1章快速幂 1875:[13NOIP提高组]转圈游戏信息学奥赛一本通(C++版)在线评测系统第2 章素数第 3 章约数第 4 章同余问题第 5 章矩阵乘法第 6 章 ...
信息学奥赛一本通题目代码（非题库）
为了完善自己学c++,很多人都去读相关文献,就比如<信息学奥赛一本通>,可又对题目无从下手,从今天开始,我将把书上的题目一一的解析下来,可以做参考,如果有错,可以告诉我,将在下次解析里重 ...
信息学奥赛一本通（C++版）刷题记录
总目录详见:https://blog.csdn.net/mrcrack/article/details/86501716 信息学奥赛一本通(C++版) 刷题记录 http://ybt.ssoier. ...
最近公共祖先三种算法详解 + 模板题建议新手收藏例题：信息学奥赛一本通祖孙询问距离
首先什么是最近公共祖先?? 如图:红色节点的祖先为红色的1, 2, 3. 绿色节点的祖先为绿色的1, 2, 3, 4. 他们的最近公共祖先即他们最先相交的地方,如在上图中黄色的点就是他们的最近公共祖先 ...

《JS控制表格奇偶数行背景色变换》

《JS控制表格奇偶数行背景色变换》相关推荐

最新文章

热门文章