JavaScript实现鼠标经过表格某行时此行变色
作者：我是Dreamer啊 发布时间：2024-04-16 08:51:18
标签：js,鼠标经过,变色
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下
表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。
<!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>
来源：https://blog.csdn.net/weixin_42579348/article/details/109743629
0
投稿猜你喜欢
- 前言在JavaScript中，数据类型分为两大类，一种是基础数据类型，另一种则是复杂数据类型，又叫引用数据类型基础数据类型：数字Number
本文实例讲述了Python多进程multiprocessing、进程池用法。分享给大家供大家参考，具体如下：内容相关：multiproces- 使用php就不一样了,php包含了zlib的链接库,可以直接使用其相关功能,下面是我写的压缩和结压缩swf文件的例子: //没有加入判断sw
- 本文实例为大家分享了JS实现倒计时图文效果的具体代码，供大家参考，具体内容如下<body><img src="i
- 如下所示：#-*- coding:utf-8 -*-import numpy as npimport matplotlib.pyplot a
- go-cqhttp安装一、 简介1、 介绍官方文档地址：https://docs.go-cqhttp.org/各种框架都只是机器人的各种实现
- mysql json解析函数JSON_EXTRACTMYSQl自带的解析函数JSON_EXTRACT,用JSON_EXTRACT函数解析出来
- 目录1、互斥锁Mutex1.1 Mutex介绍1.2 Mutex使用实例2、读写锁RWMutex2.1 RWMutex介绍2.2 RWMut
- 在使用Jupyter notebook时有这么一句代码start_frame = imread(“OwnCollection\vehicle
- py文件不是html文件，当然不能在浏览器里打开。py文件可以用任何编辑器打开，py文件是和txt一样都是普通的文本文件，只是python解
- 如何制作一个搜索引擎链接程序？多收集几个网站的，然后我们引用它到自己的页面中。接下来，我们要创建页面用于搜索：<center>&
- 我就废话不多说了，大家还是直接看代码吧~// 窗体透明，控件不透明self.setWindowFlags(Qt.FramelessWindo
- 最近在研究WEB布局，遇到<H1>标签了，<H1>标签很重要。在一般教程中都这么说，<H1>标签在同一页
- Python实现OCR识别：pytesseractPython常用pytesseract进行图片上的文字识别，即OCR识别，完整的代码比较简
- 本文实例讲述了Python单元测试方法。分享给大家供大家参考，具体如下：Eric书中《Python编程从入门到实践》中的一个例子。《Pyth
- 本文实例讲述了Python简单生成8位随机密码的方法。分享给大家供大家参考，具体如下：#!/usr/bin/env python# -*-
- 当where子句对某一列使用函数时，除非利用这个简单的技术强制索引，否则Oracle优化器不能在查询中使用索引。通常情况下，如果在WHERE
- 最常用的数值类型是int，但是它未必是最佳选择。bigint，smallint,tinyint可以应用在特殊场合。他们的特性如下表所示：Da
- 1.决定大小写是否敏感的参数在 MySQL 中，数据库与 data 目录中的目录相对应。数据库中的每个表都对应于数据库目录中的至少一个文件（
- 前言：Python可以引入指定路径的文件，原理就是使用sys.path.append加入到程序查找的路径。实验目的：调用不同目录的类和接口，
