JQuery对表格进行排序
添加相关jar
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
(1)对表格以一个条件进行排序(且添加事件):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>animate</title>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#large").tableSorter({
// 为table 的tr供应一个数组
stripingRowClass: ['odd','even'],
// 初始值
stripeRowsOnStartUp: false
});
});
</script>
<style>
.odd
{
color:red;
}
.even
{
color:blue;
}
</style> </head>
<body>
只做了一个简单的例子:
<table id="large">
<tr>
<td>demo1</td>
<td></td>
<td>张三</td>
</tr>
<tr>
<td>demo2</td>
<td></td>
<td>李四</td>
</tr>
<tr>
<td>demo3</td>
<td></td>
<td>王五</td>
</tr>
<tr>
<td>demo4</td>
<td></td>
<td>王五</td>
</tr>
<tr>
<td>demo5</td>
<td></td>
<td>王五</td>
</tr> </table>
</body>
</html>
JQuery对表格进行排序的更多相关文章
- jQuery实现表格拖动排序
原理就是利用mousedown.mouseover.mouseup事件实现拖动,并用Ajax实现保存结果. JS代码如下: <!--题目调序功能--> <script type=&q ...
- jQuery html表格排序插件:tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- JQuery实现表格的增加行和删除行
利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
- FineUI第十六天---表格的排序和分页
表格的排序和分页 1.表格的排序需要: AllowSorting:是否允许排序. SortColumn:当前排序的列ID,当然也可以不设置此属性,而是在后台初始化代码中直接指定默认排序字段. Sort ...
随机推荐
- ASP.NET MVC视图中的@Html.xxx(...)
问题 在视图页中@Html.xxx(...)是什么?如何被执行? 如下图所示: 解疑 视图页中@Html.xxx(...)涉及的内容有: 视图页被编译后的类继承自 WebViewPage<T&g ...
- (转载)throw和throws的区别
1.throw:(针对对象的做法)抛出一个异常,可以是系统定义的,也可以是自己定义的.下面举两个例子:抛出Java中的一个系统异常:public class One {public void yich ...
- erlang note
没有关于erlang interface ,继续寻找吧... --------------------------------------------------------------- erl - ...
- 【转修正】sql server行版本控制的隔离级别
在SQL Server标准的已提交读(READ COMMITTED)隔离级别下,一个读操作会和一个写操作相互阻塞.未提交读(READ UNCOMMITTED)虽然不会有这种阻塞,但是读操作可能会读到脏 ...
- 湖大OJ-实验C----NFA转换为DFA
实验C----NFA转换为DFA Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit us ...
- 转: 带你玩转Visual Studio——带你理解多字节编码与Unicode码
上一篇文章带你玩转Visual Studio——带你跳出坑爹的Runtime Library坑帮我们理解了Windows中的各种类型C/C++运行时库及它的来龙去脉,这是C++开发中特别容易误入歧途的 ...
- url传值错误
ValueError at /add/ invalid literal for int() with base 10: ''6'' Request Method: GET Request URL: h ...
- Android APK反编译详解(附图)
转载自http://blog.csdn.net/sunboy_2050/article/details/6727581 这段时间在学Android应用开发,在想既然是用Java开发的应该很好反编译从而 ...
- jQ HTML之捕获 设置 元素添加与删除
捕获 设置修改 添加元素 删除元素
- 手机触摸touch事件
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...