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中如何实现表格移入移出时背景颜色改变?(两种方法)的更多相关文章

  1. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  2. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  3. C#统计给定的文本中字符出现的次数,使用循环和递归两种方法

    前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...

  4. PyQt(Python+Qt)学习随笔:QTableWidget中表格各列平均分配宽度的两种方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在QTableWidget表格部件中,如果需要实现表格中各列要占满部件中的可用空间,同时实现各列平分 ...

  5. 在Activity中响应ListView内部按钮的点击事件的两种方法

    转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...

  6. Easy-UI中datebox的默认显示当前日期的最简单的两种方法

    在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'.所以我们可以使用'currentText'和'T ...

  7. paraview显示指定时间段的时均图(两种方法)

    方法一: 首先计算以后会得到每个时刻的网格数据,如下图: 但是我们只想要比如最后2s的数据,如果直接导入,paraview会把从0s时刻的数据全部加载,做时均图的时候也就是对整个时间段做时均,不是我们 ...

  8. windows系统中,在当前目录下打开cmd命令行的两种方法

    1.在当前路径地址栏中直接输入‘cmd’,然后回车. 2.在当前路径下,按住‘shift’键同时点击鼠标右键,点击“在此处打开Powershell”. 其实你会发现,两个命令行有很大的区别. cmd: ...

  9. Oracle中spool命令实现的两种方法比较

    ---恢复内容开始--- 要输出符合要求格式的数据文件只需在select时用字符连接来规范格式.比如有如下表 SQL>; select id,username,password from myu ...

随机推荐

  1. code-代码平台服务器路径

    下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...

  2. 早该知道的 7 个JavaScript 技巧[转]

    简洁写法 对象的简写在过去,如果你想创建一个对象,你需要这样: var car = new Object();  car.colour = 'red';  car.wheels = 4;  car.h ...

  3. 一个很详细的web.xml讲解(转)

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "- ...

  4. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  5. Docker---(8)Docker启动Redis后访问不了

    原文:Docker---(8)Docker启动Redis后访问不了 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/ ...

  6. Keepalived + Mysql 双主

    VIP 192.168.1.41 Master 192.168.1.42 Slave 192.168.1.43 .配置 yum -y install mysql-server chkconfig -- ...

  7. 低成本开始互联网创业:探讨域名、服务器、CDN、邮箱等节流之道

    互联网创业一直是个热门话题,对这个问题我也有不断的思考. 今天,探讨下如何低成本开始互联网创业. 背景 愿意冒险去创业的同志,大多是"屌丝"而非"高富帅",大多 ...

  8. 【例题 6-12 UVA - 572 】Oil Deposits

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] dfs.. [代码] #include <bits/stdc++.h> using namespace std; con ...

  9. 洛谷——P1011 车站

    https://www.luogu.org/problem/show?pid=1011#sub 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车, ...

  10. 关于Android中设置闹钟的相对完善的解决方案

    前些时候,有人在我「非著名程序员」微信公众号的后台问我有没有设置闹钟的demo,我当时说承诺为大家写一个,一直没空,直到最近又有人跟我要,我决定抽时间写一个吧.确实设置闹钟是一个比较麻烦的东西.我在这 ...