【Demo】jQuery 表格内容动态排序
实现功能：
通过点击表头某个字段，实现内容的升序或降序排序。
效果如下：
完整代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<style media="screen">
table {
border-collapse: collapse;
border-color: rgba(205, 193, 222, 0.84);
}
</style>
</head> <body>
<table border="1">
<thead>
<tr>
<th>
编号
</th>
<th>
语言
</th>
<th>
课时
</th> </tr>
</thead>
<tbody>
<tr>
<td>c001</td>
<td>c#</td>
<td>80</td>
</tr>
<tr>
<td>c002</td>
<td>Java</td>
<td>70</td>
</tr>
<tr>
<td>c003</td>
<td>PHP</td>
<td>60</td>
</tr>
<tr>
<td>c004</td>
<td>Perl</td>
<td>50</td>
</tr>
</tbody>
</table> <script>
$(document).ready(function() {
var sort_direction=1; //排序标志，1为升序，-1为降序
$('th').each(function(i) {
$(this).click(function() {
if(sort_direction==1) {
sort_direction=-1;
}
else {
sort_direction=1;
}
//获得行数组
var trarr=$('table').find('tbody > tr').get();
//数组排序
trarr.sort(function(a, b) {
var col1=$(a).children('td').eq(i).text().toUpperCase();
var col2=$(b).children('td').eq(i).text().toUpperCase();
return(col1 < col2) ? -sort_direction: (col1 > col2) ? sort_direction: 0;
//返回-1表示a>b降序,返回1表示a<b升序,否则为0相等
/*
* if (col1 > col2) {
return sort_direction;
}else if(col1 <col2){
return -sort_direction;
}else{
return 0;
}*/
}
);
$.each(trarr, function(i, row) {
//将排好序的数组重新填回表格
$('tbody').append(row);
}
);
}
);
}
);
} );
</script> </body> </html>
【Demo】jQuery 表格内容动态排序的更多相关文章
- jquery 表格排序，实时搜索表格内容
jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> < ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
- jQuery代码实现表格内容可编辑修改
1.效果及功能说明 表格特效制作jquery表格可编辑任意修改里面的数值,是一种比较人性化的用户设计体验方式 2.实现原理 通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把,所 ...
- jquery动态表格，动态添加表格行
转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图: Html:<html> &l ...
- js实现前端动态筛选表格内容
代码参考: http://www.sharejs.com/codes/javascript/4289 http://www.jb51.net/article/103420.htm https://ww ...
- 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- 推荐几款jQuery表格插件
平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...
随机推荐
- PAT 1052 Linked List Sorting [一般]
1052 Linked List Sorting (25 分) A linked list consists of a series of structures, which are not nece ...
- matlab 保存图片的几种方式
最近在写毕业论文, 需要保存一些高分辨率的图片. 下面介绍几种MATLAB保存图片的 方式. 一. 直接使用MATLAB的保存按键来保存成各种格式的图片 你可以选择保存成各种格式的图片, 实际上对于 ...
- PHP连接MYSQL操作数据库
PHP连接MYSQL操作数据库 <?php $con = mysql_connect("localhost","root",""); ...
- beego——session模块
session介绍 session是一个独立的模块,即你可以那这个模块应用于其它Go程序中. session模块是用来存储客户端用户,session目前只支持cookie方式的请求,如果客户端不支持c ...
- Magento 本地搬家至网络服务器步骤
1.将本地的Magento的数据库备份下来. 2.将本地的Magento网站资料做成ZIP资料. 3.将Magento网站 ZIP资料上传到服务器的域名指向的资料夹内. 4.将ZIP解压出来,移动到域 ...
- PKU 2082 Terrible Sets(单调栈)
题目大意:原题链接 一排紧密相连的矩形,求能构成的最大矩形面积. 为了防止栈为空,所以提前加入元素(0,0). #include<cstdio> #include<stack> ...
- sgu 103 Traffic Lights 解题报告及测试数据
103. Traffic Lights Time limit per test: 0.25 second(s) Memory limit: 4096 kilobytes 题解: 1.其实就是求两点间的 ...
- vuejs模仿实现一个电影分享类网站
前几天朋友发了一个电影分享类网站:http://dy.bingthink.top/ 感觉界面还挺好看的,所以打算用vuejs模仿写一个. 从后台转前端,要学习的东西挺多的,仅以此记录我的学习历程,闲的 ...
- pigeon 介绍
https://github.com/dianping/pigeon Pigeon开发指南 Pigeon是一个分布式服务通信框架(RPC),在美团点评内部广泛使用,是美团点评最基础的底层框架之一. 主 ...
- oracle中自定义type、以及java中传递list到过程中的例子
在java开发过程中有时候为了处理数据的速度更快,会把要处理的数据组装成list,把list作为过程的一个参数,在过程中批量处理,下面就以一个例子做简单的阐述,以此谨记. --药品目录智能审核 --说 ...