html中如何实现表格移入移出时背景颜色改变?(两种方法)
html中如何实现表格移入移出时背景颜色改变?(两种方法)
一、总结
1、通过css的table标签的hover属性:
10 #tab:hover{
11 background: green
12 }
2、通过js的onmouseover(),onmouseout()事件:
16 <table id="tab" border="1" onmouseover="change('red')" onmouseout="change('pink')">
51 function change(c){
52 var tab=document.getElementById('tab')
53 tab.style.background=c
54 }
二、html中如何实现表格移入移出时背景颜色改变?(两种方法)
1、动态改变表格背景色案例说明
- 实例描述:
JS实现鼠标移入移出时表格背景色变化
- 案例要点:
通过onmouseover(),onmouseout()以及CSS的选择器均可以实现类似的效果,具体用那种实现方式结合具体情况使用。
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.4 演示文档</title>
<style type="text/css">
/*#tab{
background: orange
}
#tab:hover{
background: green
}*/
</style>
</head>
<body>
<table id="tab" border="1" onmouseover="change('red')" onmouseout="change('pink')">
<caption>表格名称</caption>
<thead>
<tr>
<th colspan="3">标题1</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td>单元格13</td>
</tr>
<tr>
<td>单元格21</td>
<td>单元格22</td>
<td>单元格23</td>
</tr>
<tr>
<td>单元格31</td>
<td>单元格32</td>
<td>单元格33</td>
</tr>
</tbody>
<tfoot><td>备注:</td><td colspan="2"></td></tfoot>
</table>
<script>
// function change1(){
// var tab=document.getElementById('tab')
// tab.style.background='orange'
// }
// function change2(){
// var tab=document.getElementById('tab')
// tab.style.background='green'
// }
function change(c){
var tab=document.getElementById('tab')
tab.style.background=c
}
</script>
</body>
</html>
四、测试题-简答题
1、如何设置一个元素的hover属性?
解答:在css样式中设置,选择到元素然后:(冒号)hover{}来设置,如果是id就是#号,是类就是点号。
2、如何在css中设置一个标签的样式?
解答:标签名{ 属性:值 },就是选择到元素,然后在大括号中设置值,属性和值之间是冒号。
3、在css中设置样式的时候,属性和值之间是什么符号?
解答:英文状态下的冒号。
4、在css中设置样式的时候,属性设置在什么符号中?
解答:大括号
5、js中鼠标移入某元素和移出某元素的事件名字是什么?
解答:onmouseover()和onmouseout()。
6、如何给一个元素添加鼠标移出事件?
解答:在元素的标签中添加onmouseout="函数名()"; onmouseout="change()"。
7、js函数调用的时候如何带字符串参数?
解答:onmouseover="change('red')"。 括号里面是单引号包起来的字符串。
8、js中如何实现带参数函数?
解答:和php、java中一样,function change(c){}。
9、如何通过js实现表格移入移出时背景颜色改变?
解答:设置一个带参数的函数,在函数里面讲表格dom对象的style的background属性赋值为这个颜色参数,然后在标签中通过onmouseover和onmouseout调用。
10、如何通过css实现表格移入移出时背景颜色改变?
解答:在css样式设置中,通过css选择器获取元素,然后设置background属性。
html中如何实现表格移入移出时背景颜色改变?(两种方法)的更多相关文章
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- C#统计给定的文本中字符出现的次数,使用循环和递归两种方法
前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...
- PyQt(Python+Qt)学习随笔:QTableWidget中表格各列平均分配宽度的两种方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在QTableWidget表格部件中,如果需要实现表格中各列要占满部件中的可用空间,同时实现各列平分 ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法
转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...
- Easy-UI中datebox的默认显示当前日期的最简单的两种方法
在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'.所以我们可以使用'currentText'和'T ...
- paraview显示指定时间段的时均图(两种方法)
方法一: 首先计算以后会得到每个时刻的网格数据,如下图: 但是我们只想要比如最后2s的数据,如果直接导入,paraview会把从0s时刻的数据全部加载,做时均图的时候也就是对整个时间段做时均,不是我们 ...
- windows系统中,在当前目录下打开cmd命令行的两种方法
1.在当前路径地址栏中直接输入‘cmd’,然后回车. 2.在当前路径下,按住‘shift’键同时点击鼠标右键,点击“在此处打开Powershell”. 其实你会发现,两个命令行有很大的区别. cmd: ...
- Oracle中spool命令实现的两种方法比较
---恢复内容开始--- 要输出符合要求格式的数据文件只需在select时用字符连接来规范格式.比如有如下表 SQL>; select id,username,password from myu ...
随机推荐
- vue的mode: 'history'模式
const router = new VueRouter({ mode: 'history', routes: [...] }) 不用mode: 'history'的时候,页面url地址后面会加上一个 ...
- LAMP漫长编译安装
传说中的LAMP :Linux+Apache+MySQL+Python/Perl/PHP,Linux上安装方式:RPM和源码安装,源码安装要依赖包安装,可以定制安装 首先安装编译工具 yum inst ...
- docker第一章
简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协议开源. D ...
- 使用差分VHD启动Win7
平台:windows 8.1 目的:在VHD里装个Win7 介绍:建立VHD装系统姑且不表,比较有意思的是用差分VHD备份系统这点. 差分硬盘这个概念在虚拟机里常用,类似VM中的快照,不过差分硬盘更灵 ...
- Android SimpleAdapter
1.MainActivity.java public class MainActivity extends Activity { private ListView listView; private ...
- Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值
Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值 题外话:一个问题研究到最后,那边记录文档的前半部分基本上都是没用的,甚至是错误的. 重点在最后,前边不过一些假想猜測. ht ...
- 16.用Spring Boot颠覆Java应用开发
转自:https://www.cnblogs.com/aishangJava/p/5971288.html Java开发概述: 使用Java做Web应用开发已经有近20年的历史了,从最初的Servle ...
- 微服务实践(七):从单体式架构迁移到微服务架构 - DockOne.io
原文:微服务实践(七):从单体式架构迁移到微服务架构 - DockOne.io [编者的话]这是用微服务开发应用系列博客的第七篇也是最后一篇.第一篇中介绍了微服务架构模式,并且讨论了微服架构的优缺点: ...
- 使用mybatis generator 生成annotation形式的mapper
最近使用mybatisgenerator时,希望生成annotation的mapper,在网上基本桑没有相关配置,记录,做以下记录: <?xml version="1.0" ...
- [Angular] FadeIn and FadeOut animation in Angular
To define an Angular Animation, we using DSL type of language. Means we are going to define few anim ...