`

比较好懂的--表格的隔行换色的斑马效果+鼠标悬停效果

阅读更多
JS:
$(document).ready(
function() {

   //Add Odd row style
    $("#tableID tr:odd").addClass("odd");  
   //If there is remove the current style, and add new style
    $("#tableID tr:first").toggleClass("first");
   //Add even row style
    $("#tableID tr:even").addClass("even"); 
}
);
CSS:
.odd { background:#f6f6f4;text-align:center;height:23px;line-height:23px;font-size:9pt;}
.even { background:#FFFFFF;text-align:center;height:23px;line-height:23px;font-size: 9pt;}
.first { background:#676767;font-weight:bold; color:#fff;text-align:center;heihgt:23px;line-height:23px;font-size:9pt;}
鼠标动作
CSS:
.TableRowHover { background:#9aaff7;text-align:center;height:23px;line-height:23px;font-size:9pt;}

页面引用:
onmouseover="c=this.className;this.className='TableRowHover' "; onmouseout= "this.className=c"
这句放在tr中
这样一个首行为黑色,剩下的隔行换色的效果的表格就实现了
分享到:
评论

相关推荐

    表格table隔行换色以及点击整行变色.rar

    首先,让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果,因为它使得交替的行呈现出不同的颜色,从而帮助用户更容易地分辨出每一行。在HTML中,我们可以通过CSS(Cascading Style Sheets)来实现这一功能...

    js斑马线,兼容隔行变色,鼠标经过变色,鼠标离开返回

    js斑马线,兼容隔行变色,鼠标经过变色,鼠标离开返回,兼容所有浏览器

    漂亮的斑马纹table表格(基于JQuery斑马纹表格)

    如果页面上有大量的表格数据时,隔行变色的斑马纹,基于jquery中的强大的选择器nth-child,以及addClass向表格中添加css样式制作的DEMO。 漂亮的斑马纹table表格(基于JQuery斑马纹表格)demo的特点简单易用,代码中...

    bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)

    鼠标悬停时的表格效果也是Bootstrap所支持的。通过“.table-hover”类,可以使tbody中的每一行在鼠标悬停时产生效果,这样的交互增强用户的视觉反馈,使得界面更加友好。 紧缩表格可以通过“.table-condensed”类来...

    jQuery和css3响应式斑马线表格美化插件

    在斑马线表格美化方面,CSS3可以轻松实现隔行变色的效果,通过伪类`:nth-child(odd)`或`:nth-child(even)`来选择奇偶行并应用不同的背景颜色,达到视觉上的区分。此外,CSS3的媒体查询(Media Queries)使得设计可以...

    行业资料-交通装置-一种新式斑马线.zip

    行业资料-交通装置-一种新式斑马线.zip

    离子液体1-癸基-3-甲基溴化咪唑对斑马鱼的DNA损伤

    离子液体1-癸基-3-甲基溴化咪唑对斑马鱼的DNA损伤,郭莹莹,朱鲁生,本研究利用彗星实验研究了离子液体1-癸基-3-甲基溴化咪唑对斑马鱼的DNA损伤。用性成熟的斑马鱼作为指示生物,将雄鱼和雌鱼分别暴露�

    YOLOv8红外场景的车辆-行人-斑马线-交通灯检测+数据集+pyqt界面

    并包含7000多千张YOLO算法红外场景的车辆-行人-斑马线-交通灯检测数据集,数据集目录已经配置好,yolo格式的标签,划分好 train,val, test,并附有data.yaml文件,yolov5、yolov7、yolov8等算法可以直接进行训练...

    用jquery编辑的可更改表格内容的斑马表

    斑马表的样式应该在其中设定,包括奇偶行的背景颜色、单元格的边框以及鼠标悬停时的高亮效果等。 总的来说,"用jQuery编辑的可更改表格内容的斑马表"是将HTML表格与jQuery结合,通过JavaScript实现交互性,利用CSS...

    Bootstrap彩色斑马线条纹进度条设计效果

    在本主题中,我们关注的是“Bootstrap彩色斑马线条纹进度条设计效果”,这是一个利用Bootstrap的强大功能,结合CSS3技术实现的独特视觉效果。 首先,我们要理解进度条在Web界面中的作用。进度条通常用来展示任务的...

    JavaScript实现的斑马线表格效果【隔行变色】

    斑马线表格效果,又称为隔行变色效果,是一种在网页表格中常见的视觉呈现方式,其中表格的每一行或每隔一行的行背景色不同,形成类似斑马纹的视觉效果,以此来提高表格内容的可读性和美观性。实现斑马线效果的关键...

    vb斑马打印机+斑马打印机中文插件

    斑马打印机,作为工业级条码和标签打印的代表,被广泛应用于物流、零售、医疗等领域。VB(Visual Basic)是一种流行的编程语言,用于开发Windows应用程序。本话题将深入探讨如何利用VB与斑马打印机进行交互,以及...

    表格 各行换色

    标题“表格各行换色”指的是在电子表格或者网页中,为增强数据可读性,每行或每列采用不同颜色交替显示的一种技巧。这通常应用于大数据量的表格中,使得用户能更容易地区分不同的行,避免视觉疲劳。下面将详细阐述...

    table行随鼠标移动变色示例

    `.tr_odd` 和 `.tr_even` 分别用于给奇数行和偶数行添加不同的背景色,实现常见的“斑马线”效果。`.mouse_color` 类用于定义鼠标悬停时单元格的背景色。同时,`#tab` 选择器设置了表格的边框、对齐方式、宽度和高度...

    行业资料-交通装置-一种基于斑马鱼运动速度变化测定水质生物毒性的方法.zip

    行业资料-交通装置-一种基于斑马鱼运动速度变化测定水质生物毒性的方法.zip

    bootsrap实现带斑马纹的分页表格

    当这个类应用到表格元素`<table>`上时,Bootstrap会自动为表格的偶数行添加类`.bg-light`,从而在白色背景下显示浅灰色的行,形成斑马纹的视觉效果。 接下来是分页功能。Bootstrap提供了`.pagination`类用于创建...

    uniapp 表格的介绍和使用

    uniapp表格组件是一个用于展示数据的布局工具,它由四个基本组件构成:uni-table(表格组件)、uni-tr(表格行)、uni-th(表格头)和uni-td(单元格)。这些组件协同工作,帮助开发者创建具有清晰结构的数据展示。 ...

    vxe-table vue table 表格组件功能

    一个功能更加强大的 Vue 表格组件 查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •...

    行业资料-交通装置-一种水质在线监测用斑马鱼脱毒及敏感性评价方法.zip

    行业资料-交通装置-一种水质在线监测用斑马鱼脱毒及敏感性评价方法.zip

Global site tag (gtag.js) - Google Analytics