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 相关文章推荐
javascript动态设置样式style实例分析
May 13 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
Openlayers实现测量功能
Sep 25 Javascript
javascript实现倒计时提示框
Mar 02 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
长波知识介绍
2021/03/01 无线电
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
初中生自我评价
2014/02/01 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技