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& ...
随机推荐
- 学PHP也要懂得HTML
简单的HTML制做: html超文本标记语言 HTML文件主体结构: <!DOCTYPE html><html> <!--htlm开始标记 --><head& ...
- PHP小白学习日程之旅
我是一名专升本的学生,在这里偶然接触了博客园,我觉得非常好,每天可以在这里看别人的分享与学习,还会在大学学习俩年,我只想专注的吧自己的技术提高,跟园子里的朋友们一起学习与分享加油!!!!!!!!!!! ...
- Android: 关于百度地图缩放级别
18 ~ 3 {"50m","100m","200m","500m","1km","2km ...
- BP神经网络及其在教学质量评价中 的应用
本文学习笔记是自己的理解,如有错误的地方,请大家指正批评.共同进步.谢谢! 之前的教学质量评价,仅仅是通过对教学指标的简单处理.如求平均值或人为的给出各指标的权值来加权求和,其评价结果带有非常大主观性 ...
- ssh连接断开后 shell进程退出
问题描述:当SSH远程连接到服务器上,然后运行一个服务 ./catalina.sh start,然后把终端开闭(切断SSH连接)之后,发现该服务中断,导致网页无法访问. 解决方法:使用nohup命 ...
- oc 和swift混编的时候打包ipa安装不了
做了一个oc项目.里面实用到swift第三方,真机执行的时候是正常的,用企业级证书打包成ipa之后安装完毕之后闪退.通过导出手机log日志发现错误提示: Dyld Error Message: L ...
- 云上kafka和自建kafka对比
说起Kafka,许多使用者对它是又爱又恨.Kafka是一种分布式的.基于发布/订阅的消息系统,其极致体验让人欲罢不能,但操心的运维.复杂的安全策略.可靠性易用性的缺失.算不上极致的性能发挥.并不丰富的 ...
- 算法竞赛入门经典 习题 2-10 排列（permutation）
习题 2-10 用1,2,3.....,9组成3个三位数abc.def和ghi,每一个数字恰好使用一次,要求abc:def:ghi=1:2:3.输出全部解. #include <stdio.h& ...
- ubuntu16.04安装flash player
ubuntu16.04安装flash player sudo apt-get install flashplugin-installer 1 2019: apt-get install browser ...
- Web Tab, Project Properties
https://msdn.microsoft.com/en-us/library/aa983445(v=vs.100).aspx The Web tab of the project Properti ...