jQuary斑马条纹

最新推荐文章于 2021-10-18 11:21:36 发布
最新推荐文章于 2021-10-18 11:21:36 发布
阅读量175 收藏
点赞数
文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ai_169/article/details/106726716
版权 
<!DOCTYPE html>
<html>
<head>
	<title>Striped Tables</title>
	<link rel="stylesheet" href="./css/script05.css">
	<!-- 引入jquary和插件 -->
	<script src="./jqr/jquery-1.12.4.min.js"></script>	
	<script src="./jqr/jquery.tablesorter.js"></script>

	<script>
		// 列表样式
		$(document).ready(function(){
			// $("table>tbody>tr:odd").addClass("even");
			$("tr").mouseover(function(){
				$(this).addClass("over")
			})
			$("tr").mouseout(function(){
				$(this).removeClass("over");
			})

			// 排序方法
			$("#theTable").tablesorter({
			// 设置斑马条纹
			widgets:["zebra"],
			// 默认排序
			sortList:[[3,0]],
			cssAsc:"sortUp",
			cssDesc:"sortDown",
		})
		})

	
	


	</script>
	
</head>
<body>
<table id="theTable">
	<thead >
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Sex</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>

		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Sex</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
		<tr>
			<td>Student04</td>
			<td>Languages</td>
			<td>male</td>
			<td>60</td>
			<td>55</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Student05</td>
			<td>Languages</td>
			<td>female</td>
			<td>68</td>
			<td>80</td>
			<td>95</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student06</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>100</td>
			<td>99</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student07</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>85</td>
			<td>68</td>
			<td>90</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student08</td>
			<td>Languages</td>
			<td>male</td>
			<td>100</td>
			<td>90</td>
			<td>90</td>
			<td>85</td>

		</tr>
		<tr>
			<td>Student09</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>80</td>
			<td>50</td>
			<td>65</td>
			<td>75</td>
		</tr>
		<tr>
			<td>Student10</td>
			<td>Languages</td>
			<td>male</td>
			<td>85</td>
			<td>100</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student11</td>
			<td>Languages</td>
			<td>male</td>
			<td>86</td>
			<td>85</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Student12</td>
			<td>Mathematics</td>
			<td>female</td>
			<td>100</td>
			<td>75</td>
			<td>70</td>
			<td>85</td>
		</tr>
		<tr>
			<td>Student13</td>
			<td>Languages</td>
			<td>female</td>
			<td>100</td>
			<td>80</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student14</td>
			<td>Languages</td>
			<td>female</td>
			<td>50</td>
			<td>45</td>
			<td>55</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student15</td>
			<td>Languages</td>
			<td>male</td>
			<td>95</td>
			<td>35</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student16</td>
			<td>Languages</td>
			<td>female</td>
			<td>100</td>
			<td>50</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<td>Student17</td>
			<td>Languages</td>
			<td>female</td>
			<td>80</td>
			<td>100</td>
			<td>55</td>
			<td>65</td>
		</tr>
		<tr>
			<td>Student18</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>30</td>
			<td>49</td>
			<td>55</td>
			<td>75</td>
		</tr>
		<tr>
			<td>Student19</td>
			<td>Languages</td>
			<td>male</td>
			<td>68</td>
			<td>90</td>
			<td>88</td>
			<td>70</td>
		</tr>
		<tr>
			<td>Student20</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>40</td>
			<td>45</td>
			<td>40</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student21</td>
			<td>Languages</td>
			<td>male</td>
			<td>50</td>
			<td>45</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Student22</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>100</td>
			<td>99</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student23</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>80</td>
			<td>80</td>
			<td>80</td>
		</tr>
	</tbody>
</table>

</body>
</html>

在这里插入图片描述
jquary 官网下载即可

曹俊83
关注
CSS3斑马线进度条动画特效
12-13
虽然大部分现代浏览器都支持CSS3，但为了确保在所有设备上的良好体验，可以使用前缀如`-webkit-`，`-moz-`，`-ms-`等，以及考虑使用polyfill或JavaScript库如jQuery来辅助实现某些不被支持的功能。 文件结构方面，`...
斑马线实现
06-05
斑马线效果，也称为条纹化显示效果，在网页设计中被广泛应用于表格、列表等元素上，通过为相邻行交替设置不同的背景色来增强视觉效果，使数据更加清晰易读。这一技巧不仅提升了用户体验，还能够帮助用户更快速地定位...
jQuery彩色条纹进度条插件
delmarks的博客
02-04 1149
这是一款效果非常炫酷时尚的jQuery彩色条纹进度条插件。该进度条插件可以定制多种颜色，并且可以定制是否显示进度条动画。进度条可以是彩带模式，也可以使纯色模式。 该jq进度条插件最大的特点是进度条进入视口时才开始产生动画，效果非常好。 该进度条jquery插件使用了Flat UI Color Scheme来生成进度条的配色方案。如果你使用的颜色的class没有被提供，将会显示为灰色。
jQuery斑马条纹表
CSS 初学者指南
06-21 159
$("tr:odd").addClass("odd"); 然后使用一些CSS： .odd { background: #ccc; } 翻译自: https://css-tricks.com/snippets/jquery/jquery-zebra-stripe-a-table/
JQuery 斑马条纹功能实现
12-28 2336
利用 JQuery 给 表格 添加 “斑马条纹” 是表格 各行突出显示。 实例： $("table#a tr:nth-child(even)").addClass("striped"); 解释： table#a   是指给 id为 a 的表格， 如果不加#a ， 就是对整个 HTML网页中所有表格进行操作； nth-child(even)   是 JQuery 中一个强大的选择器
JQuery-Table斑马线
weixin_30448603的博客
12-27 118
HTML <html> 　　<head> 　　　　<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 　　　　<script src="Jquery.js" type="text/javascript"></script> 　　　　<script s...
[Jquery]斑马线表格
weixin_30572613的博客
11-18 123
<!doctype html> <html> <head> <script src='js/jquery-1.9.1.min.js'></script> <script type="text/javascript"> $(document).ready(function() { $('tr:even').c...
jQuery包装器
d_a_a_b的博客
10-18 135
为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方式从外部样式表中引用页面元素组。开发出来的方法就是通过使用选择器——基于元素的特性或元素在HTML文档中的位置，简明地表现元素。 例如，选择器 p a 引用所有嵌套于<p>元素之内的链接（<a>元素）组，jQuery利用同样的选择器，不仅支持目前Css中使用的常见选择器，还支持尚未被大多数浏览器完全实现的更强大的选择器，前面探讨的“斑马条纹”代码中的nth—child选择器，是在CSS3中定义的、更强大的选.
如何使用jQuery创建表格Zebra Stripes效果
一名可爱的技术搬运工
05-18 264
这是一个简单的示例，展示了如何使用jQuery创建表格Zebra Stripes效果。 <html> <head> <title>jQuery Zebra Stripes</title> </head> <script type="text/javascript" src="jquery-1.2.6.min.js">&l...
jQuery addClass
从零开始的教程世界
07-08 335
jQuery addClass function is used to add one or more specified classes to the matched DOM elements. jQuery addClass函数用于向匹配的DOM元素添加一个或多个指定的类。 jQuery addClass (jQuery addClass) Here is a simple example...
北大青鸟javascript第10章作业参考
06-05
3.使用jQuery完成一个动态的斑马条纹表格：加载后奇数行底色为红色，当鼠标进入表格时奇数行去掉底色，换成偶数行底色为红色，鼠标离开时候回复到原始状态。 4.使用jQuery实现一个网页选项卡功能：点击上方不同的...
在c#的GridView中使用邮件链接的方法.zip
09-20
我们知道，在GridView中可以使用HyperLinkField生成一个超链接，但是这个超链接只能是普通的http的超链接， 如果想做一个邮件的链接（mailto:user@abc.com）似乎就不起作用了。通过模板列的方式实现
ASP网上军事论坛的设计与实现(源代码+论文).zip
09-20
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。、可私 6信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。、可 6私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。、可私 6信博主看论文后选择购买源代码。
网站与网页设计终版.zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
vue+SpringBoot493翻转课堂微视频管理系统java毕业设计源码含论文.rar
09-20
jdk版本:jdk1.8+ 前端：vue.js+ElementUI 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架支持：springboot 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以 详细技术：java+springboot+vue+MYSQL+MAVEN 前端采用的Vue框架，后端采用java语言，sprinboot框架，mybatis操作数据源，使用软件：idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计，并基于MySQL数据库管理系统
八桂自然灾害数据库Web系统设计与实现源码(新).zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
西南科技大学java实验 7.doc
最新发布
09-20
西南科技大学java实验 7.doc
淘淘商城项目源码, (毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
使用jquery完成一个动态的斑马条纹表格:加载后奇数行底色为红色,当鼠标进入表格时
12-16
要使用jQuery完成一个动态的斑马条纹表格，可以按照以下步骤进行操作。首先，我们需要编写一个HTML表格，然后使用jQuery来为奇数行添加特定的样式。 HTML部分可以先创建一个基本的表格结构，例如： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值