jQuary斑马条纹

最新推荐文章于 2021-10-18 11:21:36 发布
最新推荐文章于 2021-10-18 11:21:36 发布
阅读量199 收藏
点赞数
文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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
关注
使用jQuery实现斑马条纹效果
SVIPCODE的博客
10-07 163
在本文中，我将向您展示如何使用jQuery来实现斑马条纹效果。接下来，我们将使用CSS来创建斑马条纹的样式。在CSS文件中，我们可以定义两个不同的类，分别表示斑马条纹的奇数行和偶数行。现在，我们可以使用jQuery来添加这些类到我们想要实现斑马条纹效果的元素中。当您在浏览器中打开该示例时，您将看到表格的行具有交替的背景颜色，从而实现了斑马条纹效果。类的表格，并在JavaScript代码中使用jQuery来实现斑马条纹效果。类的元素（例如表格），并且包含所需的行。在上面的示例中，我们创建了一个带有。
CSS3斑马线进度条动画特效
12-13
虽然大部分现代浏览器都支持CSS3，但为了确保在所有设备上的良好体验，可以使用前缀如`-webkit-`，`-moz-`，`-ms-`等，以及考虑使用polyfill或JavaScript库如jQuery来辅助实现某些不被支持的功能。 文件结构方面，`...
jQuery彩色条纹进度条插件
delmarks的博客
02-04 1186
这是一款效果非常炫酷时尚的jQuery彩色条纹进度条插件。该进度条插件可以定制多种颜色，并且可以定制是否显示进度条动画。进度条可以是彩带模式，也可以使纯色模式。 该jq进度条插件最大的特点是进度条进入视口时才开始产生动画，效果非常好。 该进度条jquery插件使用了Flat UI Color Scheme来生成进度条的配色方案。如果你使用的颜色的class没有被提供，将会显示为灰色。
jQuery斑马条纹表
CSS 初学者指南
06-21 184
$("tr:odd").addClass("odd"); 然后使用一些CSS： .odd { background: #ccc; } 翻译自: https://css-tricks.com/snippets/jquery/jquery-zebra-stripe-a-table/
JQuery 斑马条纹功能实现
tianshibaijia
12-28 307
利用JQuery给表格添加 “斑马条纹”是表格各行突出显示。 实例： $("table#a tr:nth-child(even)").addClass("striped"); 解释： table#a 是指给id为a的表格，如果不加#a ，就是对整个HTML网页中所有表格进行操作； nth-child(even) 是JQuery中一个强大的选择器，参数even是偶数行； add...
JQuery-Table斑马线
weixin_30448603的博客
12-27 136
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 147
<!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 155
为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方式从外部样式表中引用页面元素组。开发出来的方法就是通过使用选择器——基于元素的特性或元素在HTML文档中的位置，简明地表现元素。 例如，选择器 p a 引用所有嵌套于<p>元素之内的链接（<a>元素）组，jQuery利用同样的选择器，不仅支持目前Css中使用的常见选择器，还支持尚未被大多数浏览器完全实现的更强大的选择器，前面探讨的“斑马条纹”代码中的nth—child选择器，是在CSS3中定义的、更强大的选.
如何使用jQuery创建表格Zebra Stripes效果
一名可爱的技术搬运工
05-18 299
这是一个简单的示例，展示了如何使用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 379
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...
使用jquery完成一个动态的斑马条纹表格:加载后奇数行底色为红色,当鼠标进入表格时
12-16
要使用jQuery完成一个动态的斑马条纹表格，可以按照以下步骤进行操作。首先，我们需要编写一个HTML表格，然后使用jQuery来为奇数行添加特定的样式。 HTML部分可以先创建一个基本的表格结构，例如： ```html ...
jQuery实现斑马线样式动态进度条动画
在斑马线样式进度条的设计中，CSS3可以用来定义不同的条纹颜色，实现视觉上的“斑马线”效果。斑马线样式的进度条可以使用户体验更加直观和有趣。 #### 3. 兼容性处理 虽然CSS3提供了强大的功能，但是并非所有的...
实现斑马线样式range滑块的jQuery与CSS3技巧
这些样式为普通的HTML range滑块元素增添了视觉效果，使滑块看起来具有类似于斑马条纹的外观，从而提升用户界面的美观性和交互体验。 3. HTML range滑块元素: 在HTML5中引入了新的input元素类型，其中type="range...
【KUKA 机器人资料】：激光跟踪焊接机器人系统技术方案.pdf
04-26
KUKA机器人相关资料
基于Matlab的模拟退火算法在旅行商问题(TSP)优化中的应用及其实现
04-26
内容概要：本文详细介绍了利用Matlab实现模拟退火算法来优化旅行商问题（TSP）。首先阐述了TSP的基本概念及其在路径规划、物流配送等领域的重要性和挑战。接着深入讲解了模拟退火算法的工作原理，包括高温状态下随机探索、逐步降温过程中选择较优解或以一定概率接受较差解的过程。随后展示了具体的Matlab代码实现步骤，涵盖城市坐标的定义、路径长度的计算方法、模拟退火主循环的设计等方面。并通过多个实例演示了不同参数配置下的优化效果，强调了参数调优的重要性。最后讨论了该算法的实际应用场景，如物流配送路线优化，并提供了实用技巧和注意事项。 适合人群：对路径规划、物流配送优化感兴趣的科研人员、工程师及高校学生。 使用场景及目标：适用于需要解决复杂路径规划问题的场合，特别是涉及多个节点间最优路径选择的情况。通过本算法可以有效地减少路径长度，提高配送效率，降低成本。 其他说明：文中不仅给出了完整的Matlab代码，还包括了一些优化建议和技术细节，帮助读者更好地理解和应用这一算法。此外，还提到了一些常见的陷阱和解决方案，有助于初学者避开常见错误。
基于STM32的永磁同步电机Simulink代码生成与57次谐波抑制的霍尔FOC控制
04-26
内容概要：本文详细介绍了如何利用Simulink进行自动代码生成，在STM32平台上实现带57次谐波抑制功能的霍尔场定向控制（FOC）。首先，文章讲解了所需的软件环境准备，包括MATLAB/Simulink及其硬件支持包的安装。接着，阐述了构建永磁同步电机（PMSM）霍尔FOC控制模型的具体步骤，涵盖电机模型、坐标变换模块（如Clark和Park变换）、PI调节器、SVPWM模块以及用于抑制特定谐波的陷波器的设计。随后，描述了硬件目标配置、代码生成过程中的注意事项，以及生成后的C代码结构。此外，还讨论了霍尔传感器的位置估算、谐波补偿器的实现细节、ADC配置技巧、PWM死区时间和换相逻辑的优化。最后，分享了一些实用的工程集成经验，并推荐了几篇有助于深入了解相关技术和优化控制效果的研究论文。 适合人群：从事电机控制系统开发的技术人员，尤其是那些希望掌握基于Simulink的自动代码生成技术，以提高开发效率和控制精度的专业人士。 使用场景及目标：适用于需要精确控制永磁同步电机的应用场合，特别是在面对高次谐波干扰导致的电流波形失真问题时。通过采用文中提供的解决方案，可以显著改善系统的稳定性和性能，降低噪声水平，提升用户体验。 其他说明：文中不仅提供了详细的理论解释和技术指导，还包括了许多实践经验教训，如霍尔传感器处理、谐波抑制策略的选择、代码生成配置等方面的实际案例。这对于初学者来说是非常宝贵的参考资料。
基于S7-200 PLC和组态王的机械手搬运控制系统设计与调试
04-26
内容概要：本文详细介绍了基于西门子S7-200 PLC和组态王的机械手搬运控制系统的实现方案。首先，文章展示了梯形图程序的关键逻辑，如急停连锁保护、水平移动互锁以及定时器的应用。接着，详细解释了IO分配的具体配置，包括数字输入、数字输出和模拟量接口的功能划分。此外，还讨论了接线图的设计注意事项，强调了电磁阀供电和继电器隔离的重要性。组态王的画面设计部分涵盖了三层画面结构（总览页、参数页、调试页）及其动画脚本的编写。最后，分享了调试过程中遇到的问题及解决方案，如传感器抖动、输出互锁设计等。 适合人群：从事自动化控制领域的工程师和技术人员，尤其是对PLC编程和组态软件有一定基础的读者。 使用场景及目标：适用于自动化生产线中机械手搬运控制系统的开发与调试。目标是帮助读者掌握从硬件接线到软件逻辑的完整实现过程，提高系统的稳定性和可靠性。 其他说明：文中提供了大量实践经验，包括常见的错误和解决方案，有助于读者在实际工作中少走弯路。
西门子1200PLC污水处理项目：PLC程序、通讯配置与HMI设计详解
最新发布
04-26
内容概要：本文详细介绍了基于西门子1200PLC的污水处理项目，涵盖了PLC程序结构、通信配置、HMI设计以及CAD原理图等多个方面。PLC程序采用梯形图和SCL语言相结合的方式，实现了复杂的控制逻辑，如水位控制、曝气量模糊控制等。通讯配置采用了Modbus TCP和Profinet双协议，确保了设备间高效稳定的通信。HMI设计则注重用户体验，提供了详细的报警记录和趋势图展示。此外，CAD图纸详尽标注了设备位号，便于后期维护。操作说明书中包含了应急操作流程和定期维护建议，确保系统的长期稳定运行。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程、HMI设计和通信配置感兴趣的从业者。 使用场景及目标：适用于污水处理厂及其他类似工业控制系统的设计、实施和维护。目标是帮助工程师掌握完整的项目开发流程，提高系统的可靠性和效率。 其他说明：文中提供的具体代码片段和设计思路对于理解和解决实际问题非常有价值，建议读者结合实际项目进行深入学习和实践。
5电平三相MMC的VSG控制与MATLAB-Simulink仿真：调频调压效果验证
04-26
内容概要：本文详细介绍了基于5电平三相模块化多电平变流器(MMC)的虚拟同步发电机(VSG)控制系统的构建与仿真。首先，文章描述了MMC的基本结构和参数设置，包括子模块电容电压均衡策略和载波移相策略。接着，深入探讨了VSG控制算法的设计，特别是有功-频率和无功-电压下垂控制的具体实现方法。文中还展示了通过MATLAB-Simulink进行仿真的具体步骤，包括设置理想的直流电源和可编程三相源来模拟电网扰动。仿真结果显示，VSG控制系统能够在面对频率和电压扰动时迅速恢复稳定，表现出良好的调频调压性能。 适合人群：从事电力电子、电力系统自动化及相关领域的研究人员和技术人员。 使用场景及目标：适用于研究和开发新型电力电子设备，特别是在新能源接入电网时提高系统的稳定性。目标是通过仿真验证VSG控制的有效性，为实际应用提供理论支持和技术指导。 其他说明：文章提供了详细的代码片段和仿真配置，帮助读者更好地理解和重现实验结果。此外，还提到了一些常见的调试技巧和注意事项，如选择合适的仿真步长和参数配对调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值