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 相关文章推荐
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
详解vue-cli3开发Chrome插件实践
May 29 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python:slice与indices的用法
2019/11/25 Python
python groupby 函数 as_index详解
2019/12/16 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
社区党员先进事迹
2014/01/22 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2014年财务科工作总结
2014/11/11 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
员工离职证明范本
2015/06/12 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python