表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>表格隔行变色_CSS实现鼠标悬停高亮</title><meta name="keywords" content="" /><meta name="description" content="" /> <script type="text/javascript" src="../jquery-1.8.2.js"></script><script type="text/javascript">$(function(){//通过jQuery控制表格隔行换色,并鼠标悬停变色 $('tr:even:gt(0)').addClass('tr_even'); //默认偶数行背景色,无视标题行用:gt(0) $('tr:odd').addClass('tr_odd'); //默认奇数数行背景色//// });</script><style type="text/css">.headCls{background-color:#ccc;} /* 标题背景色 */.tr_even{background-color:#EBF8FF} /* 偶数行背景色 */.tr_odd{background-color:#DDECF3} /* 奇数行背景色 */ .tr_even:hover,.tr_odd:hover{background-color:red;} /* 通过CSS实现鼠标悬停高亮色 */</style> </head> <body><table border="1" width="100%" cellspacing="0" cellpadding="0"><tr class="headCls"><th>CSS实现鼠标悬停高亮</th><th>CSS实现鼠标悬停高亮</th></tr><tr><td>data1_1</td><td>data1_2</td></tr><tr><td>data2_1</td><td>data2_2</td></tr><tr><td>data3_1</td><td>data3_2</td></tr><tr><td>data4_1</td><td>data4_2</td></tr><tr><td>data5_1</td><td>data5_2</td></tr></table></body> </html>
转载于:https://www.cnblogs.com/martinzhang/p/3299228.html
表格隔行变色_CSS实现鼠标悬停高亮相关推荐
- jquery表格隔行变色
结果如下图: <!doctype html> <html> <head><meta http-equiv="content-type" c ...
- onmouseover+onmouseout :表格隔行变色
表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
- 利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- 前端-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,就开启 ...
最新文章
- 获取weblogic上指定文件的路径 java_项目部署到WebLogic文件路径访问不正确
- 十个 SCP 传输命令例子
- 开发日记-201909024 关键词 linux基础
- 矩阵分解(rank decomposition)文章代码汇总
- This file can not be opened as a file descriptor; it is probably compressed
- oracle的group by用法
- HttpClinet学习笔记
- DJ轮回舞曲网下载教程
- 【VBA】修改Excle的标题
- [Java] 蓝桥杯ADV-96 算法提高 复数求和
- 51NOD-1005 大数加法【大数】
- 开课吧Java课堂:什么是抽象类?如何使用抽象类?
- PTA--一元多项式的乘法与加法运算
- 查看oracle归档日志scn,Oracle 归档日志
- 计算某年某月某日是这一年的第几天
- javascript成神之路(1):如何编写高质量的js代码
- Cobaltstrike简介、安装及简单使用
- 强化学习初探 DQN+PyTorch+gym倒立摆登山车
- Context initialization failed
- 微信小程序——选择图片/拍照