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

来源：互联网发布：贪吃飒淘宝店编辑：程序博客网时间：2024/05/17 08:54

引言：

当我们利用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 onmouseover="changeOver(this)" onmouseout="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr onmouseover="changeOver(this)" onmouseout="changeOut(this)"><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr></table> </body></html>

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

吐舌头 感谢您的倾心阅读

0 0