添加相关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对表格进行排序的更多相关文章

  1. jQuery实现表格拖动排序

    原理就是利用mousedown.mouseover.mouseup事件实现拖动,并用Ajax实现保存结果. JS代码如下: <!--题目调序功能--> <script type=&q ...

  2. jQuery html表格排序插件：tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

  3. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  4. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  5. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  6. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  7. MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

  8. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  9. FineUI第十六天---表格的排序和分页

    表格的排序和分页 1.表格的排序需要: AllowSorting:是否允许排序. SortColumn:当前排序的列ID,当然也可以不设置此属性,而是在后台初始化代码中直接指定默认排序字段. Sort ...

随机推荐

  1. SQL简介

    SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL? SQL 指结构化查询语言 SQL 使我们有能力访问数据库 SQL 是一种 ANSI 的标准计算机语言 编者注:ANSI,美国国家标 ...

  2. Eclemma各种安装方式以及安装失败解决

    在线安装方法一: 在eclipse的菜单栏点击 Help -> Install New Software -> add Name:eclemma (名称可以随便填) Location:ht ...

  3. js检测浏览器是否支持某属性

    以检测浏览器是否支持 input 标签的 required 属性为例: var isSupport = 'required' in document.createElement('input');

  4. home page

    How To Set Your Home Page Step 1 – Navigate to Settings > Reading tab. Step 2 – Select A Static P ...

  5. connect to https://dl-ssl.google.com refused

    这个可能是网络问题,国内连google服务器经常连不上. 尝试用下面办法试下: 1.上图SDK Manager 的 Tools ->Options打开SDK Manager的Settings, ...

  6. C# base64编码的文本与图片互转

    /// <summary> /// base64编码的文本转为图片 /// </summary> /// <param name="txtFilePath&qu ...

  7. zjuoj 3604 Tunnel Network

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3604 Tunnel Network Time Limit: 2 Secon ...

  8. sql join 优化

    项目查询列表,需要新关联一张表,于是就让组下小伙更改了下sql语句,当再次进入列表查询时查询时间一下子就翻倍.那小伙找了半天没找原因. 于是我就打开代码查看,关联的一张表数据非常多,用的left jo ...

  9. 最快速的Android开发环境搭建ADT-Bundle及Hello World

    ADT-Bundle for Windows 是由Google Android官方提供的集成式IDE,已经包含了Eclipse,你无需再去下载Eclipse,并且里面已集成了插件,它解决了大部分新手通 ...

  10. wex5 教程 之 图文讲解 后台管理界面设计与技巧

    视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 ...