<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script>

			window.onload = function() {

				var oldColor;

				var tblEle = document.getElementById("tbl");

				var len = tblEle.tBodies[0].rows.length;

				for(var i = 0;i<len;i++) {

					if(i%2==0) {

						tblEle.tBodies[0].rows[i].style.backgroundColor = "pink";

						//添加鼠标经过事件

						tblEle.tBodies[0].rows[i].onmouseover = function() {

							oldColor = this.style.backgroundColor;

							this.style.backgroundColor = "blue";

						}

						// 添加鼠标离开事件

						tblEle.tBodies[0].rows[i].onmouseout = function() {

							this.style.backgroundColor = oldColor;

						}

					}else{

						tblEle.tBodies[0].rows[i].style.backgroundColor = "gold";

						//添加鼠标经过事件

						tblEle.tBodies[0].rows[i].onmouseover = function() {

							oldColor = this.style.backgroundColor;

							this.style.backgroundColor = "blue";

						}

						// 添加鼠标离开事件

						tblEle.tBodies[0].rows[i].onmouseout = function() {

							this.style.backgroundColor = oldColor;

						}

					}

				}

			}

		</script>

	</head>

	<body>

		<table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">

			<thead>

				<tr>

					<th>编号</th><th>姓名</th><th>年龄</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>1</td>

					<td>张三</td>

					<td>12</td>

				</tr>

				<tr>

					<td>2</td>

					<td>李四</td>

					<td>22</td>

				</tr>

				<tr>

					<td>3</td>

					<td>王五</td>

					<td>13</td>

				</tr>

				<tr>

					<td>4</td>

					<td>马六</td>

					<td>14</td>

				</tr>

				<tr>

					<td>5</td>

					<td>伍六七</td>

					<td>17</td>

				</tr>

				<tr>

					<td>6</td>

					<td>梅花十三</td>

					<td>17</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>

JS案例四：表格的隔行换色以及高亮显示的更多相关文章

  1. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  2. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  3. Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  4. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  5. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  6. 使用JS创建表格以及隔行换色（包括隔N行换色）

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  7. 模块：jquery实现表格的隔行换色

    效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现 ...

  8. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  9. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

随机推荐

  1. CF685B Kay and Snowflake 贪心

    CF685B Kay and Snowflake 链接 CF 题目大意 给你一颗树,询问子树的重心 思路 贪心? 重心肯定是向上走的,所以直接向上跳就好了. 不优秀的时候就不要跳了 ,因为以后也不能更 ...

  2. 移动web开发中input等输入框问题

    移动端web开发时,input等输入框在安卓和iso中都有问题,分别有:1.iso不能点击其他区域使得输入框失去焦点2.iso输入框失去焦点后,键盘产生的空白部分不消失3.安卓端输入框得到焦点后,输入 ...

  3. 2、Docker基础用法

    容器镜像:https://hub.docker.com/ Docker架构图:  https://ruby-china.org/topics/22004 Docker使用客户端-服务器(client- ...

  4. wireshark基础学习—第一部分wireshark的基础知识

    1.Wireshark主窗口 Wireshark的主窗口如下所示 2.每个面板的内容 Packet List(数据包列表): 最上面的面板用表格显示了当前不惑文件中的所有数据包,其中包括了数据包序号. ...

  5. CocosCreator 小知识

    最近在自学creator,有些小坑和解决方案,想记录下来: 1. 防止点击穿透 场景:在游戏界面有功能按钮,上层弹出layer之后,加入了遮罩,但是游戏界面的功能按钮还可以点击,穿透了! 方案1:遮罩 ...

  6. Java NIO 系列学习（一）Java NIO概述

    参考资料: http://www.importnew.com/19816.html http://ifeve.com/overview/ NIO 三大核心部分: Channel(通道).Buffer( ...

  7. 使用Selenium模块报错的解决办法 (FileNotFound,WebDriverException)

    添加Chrome浏览器程序的目录到系统Path变量中: C:\Users\%USERNAME%\AppData\Local\Google\Chrome\Application ,使用pip3 inst ...

  8. jfinal afterJFinalStart中执行长久循环操作的解决方案：创建新线程

    很多时候,需要在jfinal中afterJFinalStart方法中,写一些需要一直循环运行的程序,做一些循环操作.但是在afterJFinalStart中,执行时间过长的话,会导致整个站点启动超时. ...

  9. SKU : Stock Keeping Unit

    Stock Keeping Unit  is a number assigned to a product by a retail store to identify the price, produ ...

  10. Javascript回调函数中的this指向问题

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...