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& ...
随机推荐
- Ubuntu 16.04安装Chrome浏览器
一.先有一个hosts能访问Google 参考:http://www.cnblogs.com/EasonJim/p/5999060.html 二.安装方法有两种,如下所示: 1.下载deb包(推荐) ...
- bzoj1072【SCOI2007】排列perm
1072: [SCOI2007]排列perm Time Limit: 10 Sec Memory Limit: 162 MB Submit: 1479 Solved: 928 [id=1072&q ...
- 编译Linux使用的.a库文件
编译Linux使用的.a库文件 首先是须要编译成.a的源文件 hello.h: #ifndef __INCLUDE_HELLO_H__ #define __INCLUDE_HELLO_H__ void ...
- 打造atom成为golang开发神器
在我在Windows系统上开发的日子里.我使用IDE开发数年之久.比如Visual Basic IDE, Borland Delphi IDE, Visual C++ 和最后的Visual Studi ...
- border-image 和 border-color 不能同时使用问题
遇到如下问题: UI 给的设计,某部分,上边框为 图片,下边框为灰色横线. 看到这个的第一反应是,上边框用 border-image ,为了只让上边框显示图片,所以只给上边框宽度为所需宽度,我的图是 ...
- 桌面系统集成WEB认证系统方案
最近做的一个项目,有WEB版.WPF版.手机版.领导想集成集团的一个现成的认证系统,姑且称这个认证系统名为 W4认证系统. W4认证系统有如下特点: 1.现成的 2.是个单点登录系统 3.不支持oAu ...
- ios5--计算器
// // ViewController.m // 01-加法计算器 // // 首先找main.m文件,然后找AppDelegate,然后找Main Inteferce主交互故事板,然后加载箭头指向 ...
- shell脚本-数组
shell脚本-数组 数组 变量:存储单个元素的内存空间. 数组:存储多个元素的连续的内存空间,相当于多个变量的集合. 数组索引:编号从0开始,属于数值索引.索引可支持使用自定义的格式,而不仅是数值格 ...
- 什么是JavaScript的原始值？
JavaScript的原始值是指数字.字符串.布尔值.null和undefined. JavaScript的数据类型分为两类:原始类型(primitive type)和对象类型(object type ...
- websocket的原理
首先明确几点: 1. websocket是一种协议.是html5的一种新协议: 2. 与http的区别是,它是一种双向通信协议,服务器和客户端都能主动向对方发送或接受数据: 3. websocket需 ...