<!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. 【做题】ZJOI2017仙人掌——组合计数

    原文链接 https://www.cnblogs.com/cly-none/p/ZJOI2017cactus.html 给出一个\(n\)个点\(m\)条边的无向连通图,求有多少种加边方案,使得加完后 ...

  2. 7、Dockerfile详解

    参考: https://www.imooc.com/article/details/id/25229 https://www.cnblogs.com/panwenbin-logs/p/8007348. ...

  3. Object-C的类可以多重继承吗？可以实现多个接口吗？category是什么？重写一个类的方式用继承好还是分类好，为什么？

    Object-C的类可以多重继承吗?可以实现多个接口吗?category是什么?重写一个类的方式用继承好还是分类好,为什么? 答:Object-c的类不可以多重继承,可以实现多个接口(协议),Cate ...

  4. 【python 3】 函数 初识

    函数初识 1.函数的定义.调用.返回值 函数的定义.调用.返回值 def demo(): ## 定义函数 (def + 空格 + 函数名 + () + 冒号) ## 如下为函数体 return a # ...

  5. 从Scratch到Python之角色与造型

    从Scratch到Python之角色与造型 继续讲解通过python turtle从积木编程过渡到代码编程的技巧.角色是scratch中很重要的主角,每个角色可以更换不同的造型或者音效,堆叠不同的积木 ...

  6. Python3环境搭建

    Python3环境搭建   Windows系统下安装Python3 Python3 下载 Python3 最新源码,二进制文档,新闻资讯等可以在 Python 的官网查看到: Python 官网:ht ...

  7. lua --- 表操作

    c api 参考手册:http://www.leeon.me/a/lua-c-api-manual // LuaTest.cpp : 定义控制台应用程序的入口点. // #include " ...

  8. 同步请求和异步请求的区别,ajax异步请求如何理解

    同步请求和异步请求的区别 先解释一下同步和异步的概念 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...

  9. js如何实现类的继承

    方法一:借助构造函数实现继承 这种方法的缺点:原型链上的东西并没有被继承. 方法二:借助原型链实现继承 这种方法的缺点:改变了一个实例对象,另一个实例对象也跟着改变,因为s1.__proto__ == ...

  10. 思科模拟器PacketTracer7--利用一台交换机将两台pc划分到不同vlan下

    实验2—3 实验内容:将同一交换机下的两台pc划分到不同vlan中 实验工具:思科模拟器PacketTracer7 使用设备:一台交换机,两台PC 实验步骤: 一.配置网络拓扑图 注:1.连线可选择闪 ...