jquery 表格（鼠标悬停改变改变行背景+隔行换色）

NUM1：鼠标悬停改变改变行背景；

NUM2:隔行换色；

HTML：

<table border="1"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td>小文</td><td>20</td><td>男</td></tr><tr><td>小李</td><td>21</td><td>男</td></tr><tr><td>小慧</td><td>21</td><td>女</td></tr><tr><td>琪琪</td><td>19</td><td>女</td></tr><tr><td>小勇</td><td>22</td><td>男</td></tr><tr><td>馨儿</td><td>23</td><td>女</td></tr><tr><td>小鹏</td><td>21</td><td>男</td></tr><tr><td>鸭梨山大</td><td>30</td><td>男</td></tr></tbody></table>

CSS：

.hover{background-color: #00f;color: #fff;}

NUM1's jquery code：

$('tbody tr').hover(function(){$(this).find('td').addClass('hover');}, function(){$(this).find('td').removeClass('hover');});

NUM2's Jquery code：

$('tbody tr:odd').addClass('hover');

转载于:https://www.cnblogs.com/wenzichiqingwa/archive/2012/12/03/2799271.html

jquery 表格（鼠标悬停改变改变行背景+隔行换色）相关推荐

雷林鹏分享：jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
html怎么设置数据条的颜色,jQuery EasyUI 数据网格 – 条件设置行背景颜色 | 菜鸟教程...
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
隔行换色并且鼠标指向行变色的表格
一应用对于一些清单型数据,通常是利用表格展示到页面中.如果数据比较多,很容易看串行.这时,可以为表格添加隔行换色并且鼠标指向行变色功能. 二代码 <script language=&quo ...
php如何设鼠标经过颜色,jQuery实现鼠标滑过Div层背景变颜色的方法
本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: jQuery实现感应鼠标经过Div层变换图层背景颜色) .divbox{ height:300 ...
jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效
原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm
前端简单入门第十八讲使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
使用jquery实现隔行换色($(tbody tr:odd)获取奇数行和$(tbody tr:even)获取偶数行)以及CSS类操作addClass()的使用
使用jquery实现隔行换色技术分析最主要的就是jquery的选择器获取tbody的奇数行("tbodytr:odd")设置背景颜色在获取tbody的偶数行("tb ...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...
JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
JQuery基础下面案例用到的资源包:https://download.csdn.net/download/weixin_44537122/11879014 1.内容 1. JQuery 基础:1. ...

jquery 表格（鼠标悬停改变改变行背景+隔行换色）

jquery 表格（鼠标悬停改变改变行背景+隔行换色）相关推荐

最新文章

热门文章