<!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. Java包装类介绍与类型之间相互转换

    1.包装类存在的意义 通俗解释就是由于Java是面对对象的语言,而基本类型不具有面对对象的概念,为了弥补不足,引入了包装类方便使用面对对象的变成思想操作基本类型. 2.基本类型和包装类对应关系 byt ...

  2. Python连接MySQL数据库之pymysql模块

    pymysql 在python3.x 中用于连接MySQL服务器的一个库:Python2中则使用mysqldb pymysql的模块的基本的使用 # 导入pymysql模块 import pymysq ...

  3. [IoC容器Unity]第四回：使用范例

    1.引言 前面几个章节介绍了Unity的基本使用,主要分为程序和配置文件两种方法的使用,可以参考一下链接, [IoC容器Unity]第一回:Unity预览 [IoC容器Unity]第二回:Lifeti ...

  4. ios和android 浏览器适配问题总结

    转自 https://blog.csdn.net/wcy7916/article/details/83345705

  5. Python简单实现决策树

    __author__ = '糖衣豆豆' #决策树 import pandas as pda fname="~/coding/python/data/lesson.csv" data ...

  6. SPI通信的基础知识

    1 SPI物理层 SPI通信设备之间常用物理连接方式如下图  SPI通讯使用3条总线及片选线,3条总线分别为SCK.MOSI.MISO,片选线为CS.  CS:从设备选择信号线,常称为片选信号线,也称 ...

  7. GT sport真实赛道详解 - Brands Hatch | 伯蘭士赫治GP賽車場

    参考:GT sport所有赛道简介 GT Sport - Tip/Guide For FASTER LAP TIMES (Brands Hatch) 赛道介绍.跑法.赛事网上都有大把的视频. GT s ...

  8. 使用http服务提供yum源

    1.安装httpd yum -y install httpd systemctl start httpd systemctl enable httpd 2.镜像资源目录拷贝至http的网站根目录 /v ...

  9. 『高性能模型』轻量级网络MobileNet_v2

    论文地址:MobileNetV2: Inverted Residuals and Linear Bottlenecks 前文链接:『高性能模型』深度可分离卷积和MobileNet_v1 一.Mobil ...

  10. list<实体类>互相嵌套和前台取值问题

    list<实体类>嵌套list<实体类>,必须保证嵌套的实体类里面有这个list对象,把这个list<实体类>当做一个对象 这是需要解析的数据,并把这些数据封装成l ...