html表格行的悬停事件,jQuery实现HTML表格隔行变色及鼠标悬停变色效果

以下代码实现效果：1.表格隔行变色。2.鼠标悬停在表格行上时变色。

一：在页面内引入jquery.js。我使用的是jquery-1.6.min.js。

二：加入如下js代码

//隔行变色

$(document).ready(function(){

$(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时，执行函数

$(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数

$(this).removeClass("over");}) //移除该行的class

$(".stripe_tb tr:even").addClass("alt"); //给class为stripe_tb的表格的偶数行添加class值为alt

});

三：添加如下CSS样式表

/*注意选择器的层叠关系*/

.stripe_tb tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/

.stripe_tb tr.over td{background:#FEF3D1} /*这个将是鼠标高亮行的背景色

四：给对应表格

html表格行的悬停事件,jQuery实现HTML表格隔行变色及鼠标悬停变色效果相关推荐

解决element-ui中表格行点击事件和表格单元格点击事件冲突的问题
element-ui中如果同时设置了表格行点击事件和表格单元格点击事件的化,当点击单元格的时候会因为事件冒泡触发表格行点击事件,这不是我们需要的要解决这种事件冲突的问题,只需要在单元格的点击事件上加 ...
html 可编辑表格插件,基于Bootstrap的jquery可编辑表格插件Bootstable
插件描述:Bootstable是一款基于Bootstrap的jquery表格编辑插件.通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑. 更新时间:2019-11-2 ...
python鼠标事件包括哪几种_python-在Tkinter中列出鼠标悬停事件函数
我正在将医疗工具的GUI制作为课程项目.给定条件后,它应输出从不同网站(如webMD)收集的一堆治疗选项.我希望能够处理任何列出的治疗方法的鼠标悬停事件,以提供有关该治疗方法的更多信息(例如,药物类别 ...
html表格行列变化插件,利用jQuery实现HTML 表格行列冻结
摘要:行列冻结是处理表格非常常见的应用,我们都知道用excel可以很轻松的实现这一功能.但html编写的web网页表格中并没有冻结表格这一功能,那又要如何才能实现表格的行列冻结呢? 行列冻结是处 ...
excel表格行宽列高怎么设置_excel表格怎么设置行高列宽
excel表格怎么设置行高列宽你是怎么调整Excel表格的行高和列宽的? 如果还在用原始的手动调整方法,那你赶紧看看下面这几种解决方法,不仅效率高,而且调整的行高和列宽还很统一整齐哦,快和小编来学习 ...
html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...
PyQt5 技术篇-QTableWidget表格组件的行选择与列选择实例演示，表格组件的双击事件捕获，获取表格选中单元格的值
self.tableWidget.selectRow(0) 方法可以选择指定行. self.tableWidget.selectColumn(0) 方法可以选择指定列. # 表格的双击事件捕获 sel ...
editable组件_表格行内编辑事件
1.简介 x-editable组件是一个适用于bootstrap(目前只更新到bootstrap3),jquery,jquery UI三种风格样式的弹出框编辑插件.本文根据项目需求主要介绍它在boot ...
html语言怎么设置设置表格行高,html语言怎么设置设置表格行高？
满意答案 ostmh 2020.01.12 采纳率:58% 等级:8 已帮助:60人 width="50"> ** 1.table中的width和height设置及其作 ...
表格元素的快捷获取以及隔行变色、鼠标移入变色案例
要求:以下列代码为基础,添加JS代码,令表格实现隔行变色效果,并且实现鼠标移入表格,该行表格背景色变为绿色,移出表格后表格恢复为原隔行变色形式的背景色. <table id='tab1' bor ...

html表格行的悬停事件,jQuery实现HTML表格隔行变色及鼠标悬停变色效果

html表格行的悬停事件,jQuery实现HTML表格隔行变色及鼠标悬停变色效果相关推荐

最新文章

热门文章