<!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. javaScript数据类型的一些小细节

    JavaScript的数据类型有哪些就不说了,没必要. 由于JavaScript是一个弱类型的语言,就是定义的时候不需要定义数据类型,数据类型自动根据变量值来确定.而在JavaScript里面,数据类 ...

  2. 华为Java机试题

    1.程序实现目标: 输入一个字符串,将其各个字符对应的ASCII值加5后,输出结果. 程序要求:该字符串只包含小写字母,若其值加5后的字符值大于'z',将其转换成从a开始的字符. package co ...

  3. HDU 4348 To the moon（主席树 区间更新）题解

    题意: 给一个数组A[1] ~ A[n],有4种操作: Q l r询问l r区间和 C l r v给l r区间每个数加v H l r t询问第t步操作的时候l r区间和 B t返回到第t步操作 思路: ...

  4. 20175312 2018-2019-2 《Java程序设计》第6周课下选做——类定义

    20175312 2018-2019-2 <Java程序设计>第6周课下选做--类定义 设计思路 1.我觉得Book其实就是一个中转的作用,由测试类Bookself通过Book输入数据,然 ...

  5. GAN 旧照上色

    https://www.jiqizhixin.com/articles/2018-11-03-3

  6. hdu2844 Coins -----多重背包+二进制优化

    题目意思:给出你n种硬币的面额和数量,询问它能够组合成1~m元中的几种情况. 这题如果直接按照完全背包来写的话,会因为每一种硬币的数目1 ≤ Ci ≤ 1000而超时,所以这里需要运用二进制优化来解决 ...

  7. c# 集合去重并筛选

    (from context in retDataList group context by context.ResourceId into g select g.OrderByDescending(b ...

  8. Lintcode470-Tweaked Identical Binary Tree-Easy

    470. Tweaked Identical Binary Tree Check two given binary trees are identical or not. Assuming any n ...

  9. Java问题解决："错误: 找不到或无法加载主类"

    参考资料:https://www.cnblogs.com/wangxiaoha/p/6293340.html 场景: 使用java命令运行.class文件时出现:“错误: 找不到或无法加载主类”: 解 ...

  10. DAY 21内存处理与正则

    一.python的垃圾回收机制 1.引用计数(垃圾回收机制的根本) 1.引用计数是用来记录值的内存地址被记录的次数的 2.每一次对值地址的引用都可以使该值的引用计数+1 3.每一次对值地址的释放都可以 ...