<!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. vs2013突然打不开项目，项目全部不兼容

    转载:https://forum.cocos.com/t/vs2013/40931 转载:https://jingyan.baidu.com/article/cdddd41c7c6b5353cb00e ...

  2. win10 WSL kali 下载源 --另外 恭喜马哥喜提博客

    第一篇也不知道写什么,就把昨晚安装kali时遇见的事写一下吧! 因为win10应用商店已经加入了kali,也省的我再去网上下载镜像,可下载后  wsl  未能设置为开发人员模式, 这算是失误吧!步骤如 ...

  3. HDU 4417 Super Mario（主席树 区间不超过k的个数）题解

    题意:问区间内不超过k的个数 思路:显然主席树,把所有的值离散化一下,然后主席树求一下小于等于k有几个就行.注意,他给你的k不一定包含在数组里,所以问题中的询问一起离散化. 代码: #include& ...

  4. linux下ifconfig命令看不到IP centos7——ens33

    当前环境VMware15+centos7  在终端输入ifconfig后没有开到IP地址: 解决方法:root用户执行命令 cd /etc/sysconfig/network-scripts/ vi ...

  5. Python+MapReduce实现矩阵相乘

    算法原理 map阶段 在map阶段,需要做的是进行数据准备.把来自矩阵A的元素aij,标识成p条<key, value>的形式,key="i,k",(其中k=1,2,. ...

  6. Go 基准测试

        文章转载地址:https://www.flysnow.org/2017/05/21/go-in-action-go-benchmark-test.html 什么是基准测试?      基准测试 ...

  7. 技巧 筛1~n的所有因子

    从 i : 1~n, 是i的倍数, 则计入该数 复杂度 n*(1/1+1/2+1/3+...1/n)=nlogn ll d[N]; // 计每个数的因子数 set<ll> s[N]; // ...

  8. 使用js写简易的倒计时

    步骤 1.获取span标签2.获取现在的时间戳 3.获取未来的时间戳 4.将未来时间戳减去现在的时间戳等于相差的秒数 5.输出到页面 直接上代码 <span name="os" ...

  9. 有趣的if循环

    今天,在论坛看到一个有趣的if 循环,我感觉有不错,就分享出来 问题,列表只有6个数,为什么打印8个数?原理? q = ['a', 'b', 'c', 'd', 'e', 'f'] for i in ...

  10. 【二分查找】 跳石头NOIP2015提高组 D2T1

    [二分查找]跳石头NOIP2015提高组 D2T1 >>>>题目 [题目描述] 一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石 ...