《JS控制表格奇偶数行背景色变换》

最新推荐文章于 2022-06-22 10:14:36 发布
最新推荐文章于 2022-06-22 10:14:36 发布
阅读量5.6k 收藏 8
点赞数 1
分类专栏： Web小技能 文章标签： web前端 html 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35119220/article/details/56843113
版权


引言：

当我们利用html标记标签语言制作出一张普通的信息表格时，为了摆脱单调，提高用户体验，我们可以为其添加各种动态效果，以满足用户在操作表格时所带来的效果乐趣。

内容概括：当鼠标移动到表格上的相关单元行时，其相关行的背景色改变【颜色自定义】，并且单元行背景色的改变会根据表格行的奇偶性来改变，从而产生背景色变换的效果。



内容截图 ：

最低0.47元/天 解锁文章
卡布奇诺奶茶的独特
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JS DOM操作将奇偶数列li背景色设置为不同颜色
weixin_46394746的博客
06-08 2479
要求：页面加载完成后将奇数列li的背景色设置为红色，偶数列li背景色设置为绿色 浏览器效果： 看完效果图，下面就是怎么实现的问题了： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ol</title> &lt
用js实现将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
wangfei933的博客
06-08 2559
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>i+1</li> <li&g.
JS中奇偶行变色只用for循环,完全不需要if判断的方法！！
m0_49133501的博客
07-27 451
项目1 项目2 项目3 计划任务 完成任务 |Dashes |-- is en-dash, --- is em-dash|-- is en-dash, — is em-dash| 创建一个自定义列表 Markdown Text-to-HTML conversion tool Authors John Luke 如何创建一个注脚 一个具有注脚的文本。1 注释也是必不可少的 Markdown将文本转换为 HTML。 KaTeX数学公式 您可以使用渲染LaTeX数学表达式 KaT.
jquery怎么设置表格奇偶行不同的颜色？
qq_45991812的博客
06-22 1479
在jQuery中使用“$("tr:odd").css("background-color","颜色")”与“$("#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。
js 设置表行颜色:奇偶行变色,鼠标经过行变色,点击行变色
iteye_9657的博客
12-05 476
//调整控件的大小 function resize() { tab.width = document.body.clientWidth - 31 ; } //设置表格的奇偶行颜色 function rowColor(oTab) { for(i=0;i
JS 实现奇数偶数行颜色不同
夏沐的博客
01-13 7055
HTML代码部分： input type="button" value="隔行变色" id="btn"/&gt; &lt;ul id="uu"&gt; &lt;li&gt;红旗&lt;/li&gt; &lt;li&gt;五菱宏光&lt;/li&gt; &lt;li&gt;奔驰&lt;/li&gt
jQuery实现表格奇偶行显示不同背景色 就这么简单
01-21
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type=text/...
表格奇偶行不同背景色.rar
12-09
"表格奇偶行不同背景色"是一个常见的视觉优化策略，旨在提高数据可读性和用户浏览体验。这个压缩包文件“表格奇偶行不同背景色.rar”可能包含了实现这一效果的相关资源和示例，包括一个图像文件（demo.jpg）以及几个...
奇偶行背景颜色不一样的数据表格.zip
01-09
本资源"奇偶行背景颜色不一样的数据表格.zip"提供了一个关于如何在数据表格中实现奇偶行不同背景色的原型图示例，这对于提升用户体验、增强数据可读性非常有帮助。 首先，让我们了解一下“数据表格”。数据表格是一...
CSS JS实现表格背景变色.rar
07-05
例如，你可以为所有表格行（tr）或特定行（如偶数行或奇数行）设置不同的背景色。以下是一个基本的CSS样式示例： ```css table { border-collapse: collapse; } td, th { padding: 10px; border: 1px solid #...
表格奇偶行设置不同颜色的核心JS代码
10-26
表格奇偶行设置不同颜色，在某些情况下还是比较实用的，下面有个不错的示例，大家可以参考下，希望对大家有所帮助
很漂亮的表格框 带有样式 奇数与偶数行变化样式
08-01
很漂亮的表格框 带有样式 奇数与偶数行变化样式
利用jQuery和JS实现奇偶行背景颜色自定义效果
David_Tsai23的专栏
02-13 875
利用jquery实现 "http://www.w3.org/TR/html4/loose.dtd"> http://www.w3.org/1999/xhtml"> New Web Project $(function(){ //可以是:$('#t1 tbody tr:even').css('background','red'); $('#t1
js设置表格奇偶行的不同颜色，实现斑马效果
HuangsTing的博客
10-30 2724
让表格里的行更具有可读性的常用技巧是交替改变它们的样式背景，从而形成斑马线效果，使相邻的两行泾渭分明。通过分别设置奇数行和偶数行样式的办法可实现这种效果。如果浏览器支持CSS3，那么只需要如下两行样式： tr:nth-child(odd){background-color:#ffc;} tr:nth-child(even){background-color:#fff;} 另一种方法，可以编写一个...
JSP 奇偶行颜色
Tjhfsghbjknjdy的博客
12-12 1104
代码： <style type="text/css"> table{ margin: auto; width: 200px; border-collapse: collapse; border: 1px solid blue; } table td{ text-align: center; padding: 3px; font-...
给EXCEL表格奇偶行设置不同的背景颜色
weixin_34273481的博客
02-20 821
在Excel中，如果密密麻麻的单元格背景颜色都一样，有时还真能让人看花眼，为了让其层次分明，增强视觉效果，可以给奇偶行设置不同的背景颜色，具体方法如下： 选中所要设置的区域， 在“格式”菜单中选择“条件格式...”命令， 弹出“条件格式”对话框，在左栏中用下拉列表选择为“公式”，在右栏中输入“=MOD(ROW(),2)=1”（不包括引号）。 点击“格式”按钮，在随后跳出的“单元格格式”对话框...
写一个表格以及对应的CSS，是表格奇数行为白色背景，偶数行为灰色，鼠标移上去为黄色背景。
LuckXinXin的博客
02-29 2244
CSS HTML 3.结果
通过js实现表格隔行变色，基数行是颜色1，偶数行是颜色2，当鼠标经过某一行时，该行颜色为颜色3。
m0_57675124的博客
05-28 1123
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table border="1" cellspacing="0" width="400px"> <thead> <tr style="background-color: choc.
利用jQuery的组合实现表格的奇偶行背景色，并设置鼠标移动到表格行上时行的背景色。
L_w_J_的博客
05-14 1332
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script src="js/jquery-1.11.0.js"&gt;&lt;/s
javaweb为表单奇数行偶数行设置不同背景色
最新发布
05-25
下面是一个示例CSS代码，可以为表单中的奇数行设置灰色背景色，偶数行设置白色背景色： ```css tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #ffffff; } ``` 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值