设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑»首页 › 源码编程区 › 前端教程 › table表格鼠标移动变色html静态页码代码
返回列表 发新帖
查看: 168|回复: 0

[综合案例] table表格鼠标移动变色html静态页码代码

[复制链接]
admin

30

金豆

170

黑豆

2

精华

管理员

站长QQ：515138

主题
124
回帖
7
在线时间
76 小时
注册时间
2024-2-3
最后登录
2024-11-14
发表于 2024-8-27 18:10:15 | 显示全部楼层 |阅读模式
table表格鼠标移动变色html静态页码代码

前端html代码：
  1. <table id="jhTable">
  2. <tr>
  3. <td>Row 1, Cell 1</td>
  4. <td>Row 1, Cell 2</td>
  5. </tr>
  6. <tr>
  7. <td>Row 2, Cell 1</td>
  8. <td>Row 2, Cell 2</td>
  9. </tr>
  10. </table>
复制代码
css代码：
  1. #jhTable tr:hover {
  2.   background-color: #f5f5f5;
  3. }
复制代码
JS代码：
  1. document.addEventListener('DOMContentLoaded', function() {
  2.   var table = document.getElementById('myTable');
  3.   table.addEventListener('mouseover', function(e) {
  4.     if (e.target.tagName.toUpperCase() === 'TD') {
  5.       e.target.parentNode.style.backgroundColor = '#f5f5f5';
  6.     }
  7.   });
  8.   table.addEventListener('mouseout', function(e) {
  9.     if (e.target.tagName.toUpperCase() === 'TD') {
  10.       e.target.parentNode.style.backgroundColor = '';
  11.     }
  12.   });
  13. });
复制代码

前端教程, html教程
回复

举报

返回列表 发新帖

QQ|网站地图|Archiver|手机版|金黑 ( 粤ICP备2021124338号 )

网站建设，微信公众号小程序制作，商城系统开发，高端系统定制，app软件开发，智能物联网开发，直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表