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& ...
随机推荐
- RxJava如何结合观察者与链式处理
RxJava如何结合观察者与链式处理 Author: Dorae Date: 2018年12月3日17:10:31 转载请注明出处 一.概述 首先问自己几个问题,如果非常清楚这几个问题的目的与答案,那 ...
- redis sentinel集群配置及haproxy配置
ip分布情况: sentinel-1/redis 主 10.11.11.5 sentinel-2/redis 从 10.11.11.7 sentinel-3/redis 从 10.11.11.8 ha ...
- VCS 一次使用。
One database was down today. So I login the server try to check and fix it. I found the Oracle home ...
- Linux中W与Who命令的使用
踢掉一个从某个终端连上的用户pkill -kill -t pts/0 ---------------------------------------------------------------- ...
- ORACLE database console无法登陆
登陆EM时给我报这个错 Code d'erreur : ssl_error_weak_server_cert_key 仅仅须要关闭EM的SSL就好了 [oracle@ace-PROD1 ~]$ emc ...
- iOS开发——代码生成TabBar与视图切换具体解释
我在之前多篇博客中解说了在不使用storyboard而使用nib文件的情况下.使用代码生成导航栏并进行跳转,具体能够參考<iOS开发--界面跳转与返回及视图类型具体解释><iOS纯代 ...
- swift 2.0 语法 函数
//: Playground - noun: a place where people can play import UIKit /*: 函数 * 格式 func 函数名称(形参名称1: 形参类型, ...
- 5分钟Serverless实践：构建无服务器的图片分类系统
前言 在过去“5分钟Serverless实践”系列文章中,我们介绍了如何构建无服务器API和Web应用,从本质上来说,它们都属于基于APIG触发器对外提供一个无服务器API的场景.现在本文将介绍一种新 ...
- bzoj 5127 数据校验
题目大意: 一个数列a 对于 a 的一个区间 [l, r],若对于该区间 [l, r] 内的任意一个非空连续子区间,该子区间内出现过的数值在整数上值域连续,则称 [l, r]为合法区间 m次询问 每 ...
- linux下的so、o、lo、a、la文件的区别
o: 编译的目标文件a: 静态库,其实就是把若干o文件打了个包so: 动态链接库(共享库) lo: 使用libtool编译出的目标文件,其实就是在o文件中添加了一些信息la: 使用libtool编译出 ...