zoukankan      html  css  js  c++  java
  • 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>22</td>
        <td>张三</td>
      </tr>
      <tr>
        <td>demo2</td>
        <td>23</td>
        <td>李四</td>
      </tr>
      <tr>
        <td>demo3</td>
        <td>24</td>
        <td>王五</td>
      </tr>
        <tr>
        <td>demo4</td>
        <td>24</td>
        <td>王五</td>
      </tr>
        <tr>
        <td>demo5</td>
        <td>24</td>
        <td>王五</td>
      </tr>
    
    </table>
    </body> 
    </html> 
  • 相关阅读:
    板子们~缓慢更新
    Hello World!
    [SHOI2008]堵塞的交通traffic
    [JSOI2008]最大数
    [SCOI2005]扫雷
    [HAOI2007]上升序列
    [HAOI2007]理想的正方形
    [SCOI2003]字符串折叠
    [HAOI2008]移动玩具
    [BJOI2006]狼抓兔子
  • 原文地址:https://www.cnblogs.com/softmans/p/3529579.html
Copyright © 2011-2022 走看看