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. windows服务插件利器-新生命组件XAgent使用心得

    1.简单介绍 XAgent为大石头带领下的新生命团队自己开发的一个.Net下的常用的Windows服务管理组件利器,通过在控制台中简单的输入1,2,3,4,5等数字可以实现一步安装.卸载Windows ...

  2. 转 openssl 建立服务器证书

    openssl 建立服务器证书 ##  1,建立目录和文件     set path=D:/openssl/bin     D:     cd D:/openssl/conf/     ren ope ...

  3. jquery实现转盘抽奖

    jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...

  4. amazeui学习笔记一（开始使用4）--Web App 相关

    amazeui学习笔记一(开始使用4)--Web App 相关 一.总结 1.桌面图标(Touch icon)解决方案:终极方案:link标签的rel和href属性: <link rel=&qu ...

  5. 38.IntelliJ IDEA中创建Web聚合项目(Maven多模块项目)

    转自:https://blog.csdn.net/u012702547/article/details/77431765 Eclipse用多了,IntelliJ中创建Maven聚合项目可能有小伙伴还不 ...

  6. RPC调用框架比较分析--转载

    原文地址:http://itindex.net/detail/52530-rpc-%E6%A1%86%E6%9E%B6-%E5%88%86%E6%9E%90 什么是RPC: RPC(Remote Pr ...

  7. app 自动化测试 Appium+python可以运行的代码

    Appium

  8. C# C++ 字符串传递

    C# C++ 字符串传递 标签: c#c++bytestring测试c 2012-06-14 17:425707人阅读评论(3)收藏举报 分类: C#(11)  作者同类文章X C++(112)  作 ...

  9. Codeforces Round 363 Div. 1 (A,B,C,D,E,F)

    Codeforces Round 363 Div. 1 题目链接:## 点击打开链接 A. Vacations (1s, 256MB) 题目大意:给定连续 \(n\) 天,每天为如下四种状态之一: 不 ...

  10. 巴什博奕小结 HDU2188 HDU1846 HDU2149

    摘自百度百科: 巴什博奕(Bash Game):只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个.最后取光者得胜. 显然,如果n=m+1,那么由于一次最多只能取m个,所以, ...