一种实用的表格行鼠标点击高亮效果
时间:2022-04-23
本文章向大家介绍一种实用的表格行鼠标点击高亮效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效)
<script type="text/javascript">
var highlightcolor='#E0F2FE';
var clickcolor='#ffedd2';
function MouseOver(){
var source=event.srcElement;
if (source.tagName=="TD"){
source=source.parentElement;
var cells = source.children;
if (cells[0].style.backgroundColor!=highlightcolor&&cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++){
cells[i].style.backgroundColor=highlightcolor;
}
}
}
function MouseOut(){
var source=event.srcElement;
if (source.tagName=="TD"){
source=source.parentElement;
var cells = source.children;
if (cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++){
cells[i].style.backgroundColor="";
}
}
}
function MouseClick(){
var source=event.srcElement;
if (source.tagName=="TD"){
source=source.parentElement;
var cells = source.children;
if (cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++)
cells[i].style.backgroundColor=clickcolor;
else
for(i=0;i<cells.length;i++)
cells[i].style.backgroundColor="";
}
}
</script>
<table onmouseover="MouseOver()" onclick="MouseClick()" onmouseout="MouseOut()" cellspacing="0" bordercolordark="#ffffff" bordercolorlight="#cccccc" border="1" width="80%" align="center" style="cursor:pointer">
<tr>
<td>1</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>3</td>
<td>e</td>
<td>f </td>
</tr>
<tr>
<td>4</td>
<td>g</td>
<td>h </td>
</tr>
</table>
- WordPress 的几个高级调试( Debug)技巧
- Customizer Library:主题“自定义”功能的WordPress类库
- Reactjs 入门基础(二)
- WordPress中当评论审核通过时候给评论者发邮件
- Reactjs 入门基础(一)
- Option Framework 框架的三个自定义技巧
- 记录一个在Mac OS X 中本地安装Ghost 的报错问题
- 盘点:2017年发生在上海的科技大新闻 与我们的生活如何密切相关
- 滚雷进口车获5亿元投资 品牌双拼给力十足
- Github 与 Bitbucket 的互助协作
- JavaScript 基础(七) 箭头函数 generator Date JSON
- 初体验 Ghost : yet another WordPress?
- 浅谈MySQL的事务隔离级别
- 国内环境下前端网页开发的几个“中国特色”代码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (三)python3 只需3小时带你轻松入门—— 变量的简单运算
- (四)python3 只需3小时带你轻松入门—— 流程控制
- (五)python3 只需3小时带你轻松入门—— 逻辑运算符
- (六)python3 只需3小时带你轻松入门——循环
- (七)python3 只需3小时带你轻松入门——List与dict
- Rstudio支持可视化的Markdown编辑了?
- (八)python3 只需3小时带你轻松入门——List 与 dict 的常用操作
- (九)python3 只需3小时带你轻松入门——函数自定义
- (十)python3 只需3小时带你轻松入门——模块与包
- (十一)python3 只需3小时带你轻松入门——面向对象
- 一文读懂KEGG数据库
- (创建模式 上)设计模式——工厂、抽象工厂 C++/Python3实现
- 【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式,这篇博文很有可能是你的启蒙文
- 一种不需要敲代码的Python 画图方法
- 【一】Windows API 零门槛编程指南——MessageBox 基本使用及基础讲解