JavaScript实现鼠标经过表格某行时此行变色


Posted in Javascript onNovember 20, 2020

本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码,供大家参考,具体内容如下

JavaScript实现鼠标经过表格某行时此行变色

表格表头为蓝色,表主体为白色,当鼠标放到表的非表头行时,这一行颜色变为黄色,鼠标离开时黄色消失。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标经过表格变色</title>
  <style>
    table {
      margin: 200px auto;
      font-size: 12px;
      
      border-collapse: collapse;
      width: 500px;
      height: 50px;
    }
    table thead tr {
      font-size: 14px;
      background-color: skyblue;
    }
    td {
      border: 1px solid black;  
    }
    .bgc{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <td>表头1</td>
      <td>表头2</td>
      <td>表头3</td>
    </thead>
    <tbody>
      <tr>
        <td>表格一行一列</td>
        <td>表格一行二列</td>
        <td>表格一行三列</td>
      </tr>
      <tr>
        <td>表格二行一列</td>
        <td>表格二行二列</td>
        <td>表格二行三列</td>
      </tr>
      <tr>
        <td>表格三行一列</td>
        <td>表格三行二列</td>
        <td>表格三行三列</td>
      </tr>
      <tr>
        <td>表格四行一列</td>
        <td>表格四行二列</td>
        <td>表格四行三列</td>
      </tr>
      <tr>
        <td>表格五行一列</td>
        <td>表格五行二列</td>
        <td>表格五行三列</td>
      </tr>
    </tbody>
  </table>
  <script>
    var tr =document.querySelectorAll('tr');
    for(var i = 0;i < tr.length ;i++){
      tr[i].onmouseover = function(){
        this.className = 'bgc';
      }
      tr[i].onmouseout = function(){
        this.className = '';
      }
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
详解使用vuex进行菜单管理
Dec 21 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 #Javascript
JavaScript实现网页下拉菜单效果
Nov 20 #Javascript
JavaScript实现网页tab栏效果制作
Nov 20 #Javascript
原生js实现弹窗消息动画
Nov 20 #Javascript
js实现限定区域范围拖拉拽效果
Nov 20 #Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
You might like
详谈PHP编码转换问题
2015/07/28 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python命令行解析模块详解
2018/02/01 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python二维码生成识别实例详解
2019/07/16 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Python 创建守护进程的示例
2020/09/29 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
优秀教师事迹简介
2014/02/02 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
个园导游词
2015/02/04 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers