JS——高级各行换色
1、获取tbody下的子元素
2、注册鼠标覆盖事件时存储当时的背景颜色，注册鼠标离开事件时把存储的颜色赋值注册事件对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
} div {
width: 300px;
margin: 50px auto;
} table {
width: 300px;
height: 200px;
border: 1px solid #ccc;
border-collapse: collapse;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} th, td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} tbody tr {
background-color: #f0f0f0;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr>
<td>2</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr>
<td>3</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr>
<td>4</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr>
<td>5</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
<tr>
<td>6</td>
<td>你好</td>
<td>你好</td>
<td>你好</td>
</tr>
</tbody>
</table>
</div>
<script>
var tbody = document.getElementsByTagName("tbody")[0];
var trs = tbody.children;
var color = "";
for (var i = 0; i < trs.length; i++) {
if (i % 2 !== 0) {
trs[i].style.backgroundColor = "#c3c3c3";
}
trs[i].onmouseover = function () {
color = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trs[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
</script>
</body>
</html>
JS——高级各行换色的更多相关文章
- 基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...
- JS应用实例1：表格各行换色
效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- js之隔行换色
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- js表格隔行换色和hover效果
<!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...
- css和js处理隔行换色的问题
<html> <head> <meta charset="utf-8"> <meta name="" conten ...
- 原生js实现音乐列表（隔行换色、全选）
一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时 结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...
- JS给TR隔行换色，鼠标经过有动感
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- 利用JS动态生成隔行换色HTML表格
用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...
- js课程 4-11 表格如何实现隔行换色
js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...
随机推荐
- ECMAScript 6 入门学习笔记（零）——开始
所有es6笔记都是我自己提出来的一些点,没有很详细的例子什么的,这个链接就是我看的教程,有需要的可以看看.(http://es6.ruanyifeng.com/#docs/intro) 1.ECMAS ...
- 洛谷—— P2658 汽车拉力比赛
https://www.luogu.org/problem/show?pid=2658 题目描述 博艾市将要举行一场汽车拉力比赛. 赛场凹凸不平,所以被描述为M*N的网格来表示海拔高度(1≤ M,N ...
- HashMap源码分析3：移除
本文源码基于JDK1.8.0_45. final Node<K,V> removeNode(int hash, Object key, Object value, boolean matc ...
- Windows 10+Ubuntu 16.04在MBR分区上安装双系统（转）
以下内容转自这篇博客: http://www.cnblogs.com/Duane/p/5424218.html http://www.cnblogs.com/Duane/p/6776302.html( ...
- 26、Java并发性和多线程-线程池
以下内容转自http://ifeve.com/thread-pools/: 线程池(Thread Pool)对于限制应用程序中同一时刻运行的线程数很有用.因为每启动一个新线程都会有相应的性能开销,每个 ...
- c++中的set_new_handler和new_handler
当operator new申请一个内存失败的时候,它会进行如下的处理步骤: 1.如果存在客户指定的处理函数,则调用处理函数(new_handler),如果不存在则抛出一个异常. 2.继续申请内存 ...
- Unity3d PBR海水渲染
三层水 博主近期渲染:近期用unity5弄的一些渲染 ---- by wolf96 http://blog.csdn.net/wolf96
- Android面试题1
1.Android中intent的是? 答:实现界面间的切换,能够包括动作和动作数据.连接四大组件的纽带. 2.SAX解析xml文件的长处的是? 答:不用事先调入整个文档,占用资源少 3.在andro ...
- Cocos2d-x 3.x 图形学渲染系列十五
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
- Arduino程序-光敏电阻
尽管造书去做的.但还是有莫名的成就感 从串口显示出,电压变化, void setup() { // put your setup code here, to run once: Serial. ...