表格隔行变色效果

于 2022-05-22 17:48:32 发布
阅读量169 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/donggua123011/article/details/124913741
版权

因为表格第一行不改变鼠标经过样式，所以整体表格分为thead和tbody两部分

thead头部部分watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_16,color_FFFFFF,t_70,g_se,x_16

tbody部分

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16 

 设置css样式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_17,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16 

 设置js部分

鼠标经过tr行，当前的背景颜色就要改变，鼠标离开又要去掉背景颜色，所以会用到鼠标经过:onmouseover和鼠标离开:onmouseout事件

因为第一行不改变，所以我们只获取tobdy里面的行，然后利用循环事件绑定鼠标经过和鼠标离开效果watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16在js里面添加一个类用于js更改后的背景颜色

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16 

 

酒酿小小汤圆
关注
表格隔行变色2020/11/21
weixin_50286102的博客
11-21 639
onmouseover:鼠标经过事件 onmouseout:鼠标离开事件 元素 定义了一个包含数据的表格单元格 代表行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht.
JavaScript小案例——表格隔行变色效果
weixin_54645034的博客
10-02 928
本例主要通过鼠标经过事件来操作元素内容，具有一定的应用广泛性，操作简单，仅用于参考学习。
使用DOM方法实现表格的隔行变色效果
02-27 601
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 -->         111111111111  111111111111         222222222222  222222222222
实现表格隔行变色
weixin_30657999的博客
01-19 115
<SCRIPT LANGUAGE=”JavaScript”> $(document).ready(function(){ 　　$(".instore-table tr:even").css("background","#f6f7fa"); 　　$(".instore-table tr:even").attr("bg","#f6f7fa"); 　　$(".instore-ta...
表单数据验证_表格隔行变色效果_复选框的操作_好友列表_省市菜单联动效果
08-03
在IT领域，网页开发是不可或缺的一部分，而表单数据验证、表格隔行变色效果、复选框操作、好友列表以及省市菜单联动效果都是网页交互中的常见功能。这些功能不仅提升了用户体验，也是开发者必备的技能。下面将详细...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
利用html css javascript实现表格隔行变色效果
weiyuyang250的博客
10-11 347
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
android表格效果之ListView隔行变色实现代码
09-05
在Android开发中，为了提升用户界面的视觉效果和可读性，经常会在表格视图，如ListView中实现隔行变色的功能。这个功能使得用户在浏览列表时更容易区分不同的行，提高了阅读体验。本篇文章将详细讲解如何在Android中...
实现表格的隔行变色
11-13
实现表格的隔行变色
表格颜色自动隔行变色
11-15
表格颜色自动隔行变色
JavaScript 实现表单的隔行换色代码
07-31
NULL 博文链接：https://blueprint86.iteye.com/blog/997902
html基础：实现表格隔行变色
lena blog
08-13 265
代码 页面效果
表格隔行变色
fdsal的博客
10-07 307
表格隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
WPS表格隔行变色
qq_39958629的博客
04-09 3584
1、选择要使用的区域 2、开始–>条件格式–>新建规则； 3、在弹出的“新建规则格式”里选择“使用公式确定要设置格式的单元格”，在“只为满足以下条件的单元格设置格式里输入”下面公式。点击“格式”。 竖向隔行公式：=MOD(COLUMN(),2)=0 横向隔行公式：=MOD(ROW(),2) 4、在‘单元格格式’里，选择“图案”，“颜色”，“确定”。 5、效果 ...
表格隔行/列变色
小白小白从不日别的博客
05-05 337
<script src="js/jquery-1.12.3.min.js"></script> <style> table { margin-top: 100px; } </style> <table border="1" cellspacing="0" width="600" align="center"> <tr> .
实现 表格 隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
11-03 1306
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> <script src="../jquery.js"></script> <style> table{ width:100%; }
jQuery表格之隔行变色
Java技术
07-15 1548
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table { margin: auto; } </style> <...
JavaScript与jQuery实现表格隔行变色与Tab标签页特效
在Web开发中，为了提升用户体验，经常会使用一些视觉效果，如表格隔行变色和Tab标签页切换。这篇教程主要讲解了如何使用JavaScript实现这两个效果，并提供了jQuery版本的实现代码。 首先，我们来看表格隔行变色的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值