onmouseover+onmouseout :表格隔行变色
表格隔行变色
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格隔行变色</title><style>table {width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: #cccccc;}</style>
</head><body><table><thead><tr><!-- tr行 th列 --><th>代码</th><th>名称</th><th>最新公布净值</th><th>累计净值</th><th>前单位净值</th><th>净值增长率</th></tr></thead><tbody><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>// 1.获取元素 获取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function () {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function () {this.className = '';}}</script>
</body></html>
onmouseover+onmouseout :表格隔行变色相关推荐
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- 前端-table表格隔行变色
table表格隔行变色 作为一个后端的我,在某公司无前端工程师时,系统那体验自己用起来都想骂人了.今天就纪录一下,自己在后台经常用到的一个小玩意. :nth-child(): 定义和用法 :nth-c ...
- 实现表格隔行变色的方法
css实现表格隔行变色: <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 构建界面 界面HTML代码 <style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border ...
- Layui数据表格隔行变色的两种方法
开发工具与关键技术:MVC 作者:Mr_恺 撰写时间:2019年7月17日 Layui数据表格隔行变色,第一种的就是layui插件里有一个自带的方法: even这个属性把它设置为:true,就开启 ...
- jquery表格隔行变色
结果如下图: <!doctype html> <html> <head><meta http-equiv="content-type" c ...
- 利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
最新文章
- 物体检测丨从R-CNN到Mask R-CNN
- 课外扩展:使用RADIUS来集中管理***服务器(2)
- 重写了GD32VF103的启动脚本和链接脚本
- 互联网产品设计常用文档类型-BRD、MRD、PRD、FSD
- EE Servlet 3:如何在Web应用程序中设置后端服务
- shocked的歌曲 类似shell_Shell Shocked
- MVC - 建立模型/实体类,对应到数据库
- 多个DataTable的合并成一个新表
- Leetcode每日一题:860.lemonade-change(柠檬水找零)
- IntelliJ IDEA开发工具插件GsonFormat插件安装使用
- msi b460m pro wifi黑苹果 efi
- Android包管理机制2 PackageInstaller安装APK
- 人工客服——图灵机器人教程
- android设置背景图片透明
- 计算机网络(第八版)谢希仁
- python+vue+elementui健身房网站管理系统django-pycharm项目
- [OHOS ERROR] FileNotFoundError: [Errno 2] No such file or directory: ‘python‘
- 使用STM32CubeMX新建小熊派的STM32L431RCT6工程实现LED灯闪烁
- How to deal with Imbalanced Datasets in PyTorch - Weighted Random Sampler Tutorial
- 最优化:一维搜索的Wolfe条件与Goldstein条件
热门文章
- [PATCH] UBUNTU: SAUCE: (no-up) apparmor: Sync to apparmor3 - RC1(v3.4.x kernel)
- 实例 20 重定向输出流实现程序日志
- 为什么事务日志自动增长会降低你的性能
- 软件需求规格说明书(网络助手)
- Android之ViewPager中包含ViewFlipper时实现双滑动嵌套解决父控件干扰问题
- java中excelAPI的简介
- 源码安装Tomcat及配置
- 注意判断js中使用正则表达式的转义字符,到底是对谁进行转义!!!
- 【Python】Python中的日志级别
- Kali linux 2016.2(Rolling)之 Nessus安装及Plugins Download Fail 解决方法