jquery表格隔行变色
结果如下图:
<!doctype html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>薛之谦--歌曲--表格隔行变色</title><script type="text/javascript" src="js/jquery-3.2.1.js"></script><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(function(){//通过jQuery控制表格隔行换色,并鼠标悬停变色$('tr:even:gt(0)').addClass('tr_even'); //默认偶数行背景色,无视标题行用:gt(0)$('tr:odd').addClass('tr_odd'); //默认奇数数行背景色$('tr:gt(0)').mouseover(function(){$(this).addClass('tr_hover'); //通过jQuery控制实现鼠标悬停上的背景色,无视标题行用:gt(0)}).mouseout(function(){$(this).removeClass('tr_hover'); //通过jQuery控制实现鼠标悬停上的背景色}); });</script><style type="text/css">.headCls{background-color:#ccc;} /* 标题背景色 */.tr_even{background-color:#FFCCCC} /* 偶数行背景色 */.tr_odd{background-color:#FF6666} /* 奇数行背景色 */.tr_hover{background-color:#FFCC99} /* 鼠标悬停上的背景色 */</style>
</head>
<body><table border="1" width="100%" cellspacing="0" cellpadding="0">
<!-- <tr class="headCls"><th align="center">薛之谦de歌曲</th></tr> --><tr><th>编号</th><th>歌曲名称</th><th>在线播放</th><th>点播计数</th></tr><tr><td>1</td><td>演员</td><td><a href=https://y.qq.com/n/yqq/song/001Qu4I30eVFYb.html>播放</a></td><td>111</td></tr><tr><td>2</td><td>丑八怪</td><td><a href=https://y.qq.com/n/yqq/song/000QwTVo0YHdcP.html>播放</a></td><td>222</td></tr><tr><td>3</td><td>刚刚好</td><td><a href=https://y.qq.com/n/yqq/song/001TXSYu1Gwuwv.html>播放</a></td><td>333</td></tr><tr><td>4</td><td>暧昧</td><td><a href=https://y.qq.com/n/yqq/song/003v4UL61IYlTY.html>播放</a></td><td>444</td></tr></table>
</body>
</html>
jquery表格隔行变色相关推荐
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
- onmouseover+onmouseout :表格隔行变色
表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- 前端-table表格隔行变色
table表格隔行变色 作为一个后端的我,在某公司无前端工程师时,系统那体验自己用起来都想骂人了.今天就纪录一下,自己在后台经常用到的一个小玩意. :nth-child(): 定义和用法 :nth-c ...
- 实现表格隔行变色的方法
css实现表格隔行变色: <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 构建界面 界面HTML代码 <style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border ...
- Layui数据表格隔行变色的两种方法
开发工具与关键技术:MVC 作者:Mr_恺 撰写时间:2019年7月17日 Layui数据表格隔行变色,第一种的就是layui插件里有一个自带的方法: even这个属性把它设置为:true,就开启 ...
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
- 利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
最新文章
- django_models_关系一对多
- Redis 启动与授权
- Alpha系列(四)——主动投资管理定律(基本篇)
- 战略模式并不意味着春天!
- “约见”面试官系列之常见面试题第二十篇之vuex得理解(建议收藏)
- 【干货】B站品牌营销指南.pdf(附100页pdf下载链接)
- 好程序员分享24个canvas基础知识小结 1
- x86基础之数与数据类型
- oracle linux 下载地址
- 怎么把PDF转换成jpg图片?这两种方法快来get
- python问卷星微信登录_Python+Selenium自动刷问卷星问卷
- 22.11.16 IO day 8
- 关于浏览器打开时自动打开部分网页(浏览器被劫持)的解决办法
- 网站开发-php开发手机论坛(11)-用户中心
- 数字图像处理---低高通滤波实验(MATLAB实现)
- 2009 雷人记录汇总[转]
- vue-webpack.config使用七牛云cdn镜像加速
- 并行传输数据和串行传输数据_计算机系统中的并行处理和数据传输模式
- 10 数据库与身份认证
- 如何用javaweb实现网上招聘系统、基于SSM+mysql的校园大学生兼职招聘平台
热门文章
- python绘图 添加文字_Python | 将文字添加到绘图中
- 测试步行的软件,【推荐】“起立-行走”计时测试简介——功能性步行能
- Android A2DP
- 华为昇思MindSpore详细教程(一)
- for循环之国际象棋棋盘
- hp光影桌面怎样找此计算机,重装惠普光影精灵III代win7系统教程
- mysql 5.7 mysqladmin root密码_Mysql5.7忘记root密码及mysql5.7修改root密码的方法
- xp计算机找不到音量调节,XP系统桌面右下角的音量开关图标不见了,怎么恢复?...
- Flink基础(十二):Parallelism 和 Slot 详解
- 数据库系统h概论——1、基本的概念