jQuary斑马条纹
2024-05-23 22:18:09
<!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 官网下载即可
jQuary斑马条纹相关推荐
- css渐变斑马条纹_创建斑马条纹表
css渐变斑马条纹 Scenario: you are the developer of a website for a band called The Tramps, who have embark ...
- 斑马条纹是为了驱散舌蝇和马蝇
为什么斑马会演化出不规则的条纹?有人说是伪装,也有人说是为了让潜在交配对象知道它很健康:另外有人指出由于每个斑马身上都有独一无二的条纹,因而可以用于辨别身份,虽然人类只会觉得眼花缭乱.但是,一项最新研 ...
- css：实现斑马条纹背景
效果 代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
- CSS 实现斑马条纹
Part.1 linear-gradient() linear-gradient() 函数用于创建一个线性渐变的 "图像".为了创建一个线性渐变,你需要设置一个起始点和一个方向(指 ...
- ant design vue给table设置斑马条纹样式
效果图 <a-table :columns="columns" :data-source="data"></a-table> css设置 ...
- html5多颜色灯笼旋转,HTML5 Canvas 漂亮的斑马条纹灯笼
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var c = document.getElementById("c"); var ct ...
- html条纹填充色,HTML5/Canvas 上传图片的彩色斑马条纹遮罩效果
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var reader = new FileReader(); var img = document.crea ...
- element-ui table自定义斑马条纹颜色
1.el-table 加 :row-class-name="xxxTableRowClassName" 2.methods 中加方法 xxxTableRowClassName({r ...
- Vue实现进度条斑马条纹动画效果（easiest）
实现效果: 实现代码: <template><div class="hair-salon-bar-container"><div :style=&qu ...
最新文章
- 阿里首次开源深度学习框架X-Deep Learning
- python中lambda 表达式（无参数、一个参数、默认参数、可变参数（*args、**kwargs）、带判断的lambda、列表使用lambda）
- R可视化ggplot2绘制重叠密度图(Overlay Density Plots)
- 机器学习之挖掘melb_data.csv数据
- （进阶篇）Cookie与 Session使用详解
- react的bind(this)
- Swift - 14 - 字符串的基础操作
- 蓝桥杯 ALGO-21 算法训练 装箱问题
- layui 分页 固定底部_论layui的使用体验
- python中安装opencv一直说不是内部或外部文件_Window系统下Python如何安装OpenCV库
- 问题 A: 深度学习
- Java开发中的23种设计模式
- demo连接php,PHP获取网页所有连接的方法(附demo源码下载)
- 基于python的贪吃蛇游戏设计与实现
- Microsoft Edge浏览器兼容性问题解决方法
- vue之设置背景图片自适应屏幕
- 【论文笔记】视频物体检测(VID)系列 FGFA：Flow-Guided Feature Aggregation for Video Object Detection
- 微信小程序开发百度云分享
- Java - 为什麽 Iterator接口 不提供 add(E) 方法 ?
- 数字图像处理--冈萨雷斯第4版--第一章 绪论