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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
js获取url传值的方法
Dec 18 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
two.js之实现动画效果示例
Nov 06 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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 变量定义方法
2009/06/14 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python实现任意位置文件分割的实例
2018/12/14 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
工作自我评价怎么写
2014/01/29 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
中职招生先进个人材料
2014/08/31 职场文书
法人委托书范本格式
2014/09/15 职场文书
员工表扬信怎么写
2015/05/05 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
pandas数值排序的实现实例
2021/07/25 Python