博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现table、列表隔行换色
阅读量:6902 次
发布时间:2019-06-27

本文共 567 字,大约阅读时间需要 1 分钟。

hot3.png

为了增强用户体验,快速识别行内容,一般都会在一些列表或者表格设置隔行换色~

101842_3S0s_2312977.png

本人了解到的有两种常用的方法~

1,利用CSS进行隔行换色

tr{ background: #E0F0FA;}tr:nth-child(2n){ background: white;} //规定属于其父元素的第2n(第偶数个)个子元素的每个 tr 的背景色tr{ background-color: expression((this.sectionRowIndex % 2 == 0) ?   "#E0F0FA" : "white" );}

2,利用JQuery实现隔行换色

$(".table tr:not(:has(th)):odd").css({"background-color":"#F7F8FA"});

另:如果想对鼠标点击添加类,然后进行颜色高亮的话,你会发现,隔行失效(高亮背景色无法显示)~这个时候设置颜色高亮的那个类的CSS优先级就可以了,利用!important~

.selected{  background-color:  #A3CCE8 !important;}

Duang一下就可以了~哈哈哈

PS,有更好的方法请评论补充,谢谢~

转载于:https://my.oschina.net/AllenChou/blog/402265

你可能感兴趣的文章
wscript运行js文件
查看>>
js 获取当前时间
查看>>
Hibernate5-多对一双向关联-fetch="select",lazy="proxy"
查看>>
UIGestureRecognizer 事件冲突
查看>>
CentOS6 运行级别
查看>>
抓取Nginx前20个访问IP
查看>>
python脚本删除n天前文件可用于windows,linux并且支持跨平台
查看>>
如何卸载win 7中无用的更新补丁包
查看>>
什么是最好的linux服务器管理系统
查看>>
完全卸载oracle
查看>>
汇编----指令(一)
查看>>
我的友情链接
查看>>
在虚拟机上安装centos7
查看>>
【C#】string.format 应用
查看>>
地图检索 – 与众不同
查看>>
nginx 配置实战:流量及并发连接数限制
查看>>
关于logrotate的额外补充
查看>>
我的友情链接
查看>>
图解自定义安装CentOS
查看>>
Xposed hook(android)
查看>>