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> 
  • 相关阅读:
    JAVA 单例模式
    CodeForces Round #563 Div.2
    拓扑排序 JAVA
    初识 Dubbo
    CodeForces Round #567 Div.2
    Educational Codeforces Round 65 (Rated for Div. 2)
    最短路径问题
    C++使用fixed和precision控制小数和有效位数的输出以及setw()设置输出宽度
    poj3684(弹性碰撞模型)
    集合的整数表示
  • 原文地址:https://www.cnblogs.com/softmans/p/3529579.html
Copyright © 2011-2022 走看看