jquery表格排序

全冠清

浏览: 52471 次
性别:
来自: 北京

最近访客更多访客>>

Isaacedvr

卿卿-

雨过后放晴

vondon

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (23)

社区版块

存档分类

jQuery J#HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <title>jq sort</title>
    </head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
       $.fn.sort=function(fun){
           var d=this
           var dom=this.find('tr:gt(0)')
           dom.each(function(i){
              dom.each(function(j){
                  if(j<=i){
                     return true;
                  }
                  var dom1=dom.eq(i)
                  var dom2=dom.eq(j)
                  if(fun(dom1,dom2)){
                      dom1.before(dom2);
                     dom=d.find('tr:gt(0)')
                  }
              })
           })
       }
       $(document).ready(function(){
           $('tr th').each(function(i){
              $(this).toggle(function(){
                  $(this).parent().parent().sort(function(dom1,dom2){
                      var value1=parseInt(dom1.find('td:eq('+i+')').text());
                       var value2=parseInt(dom2.find('td:eq('+i+')').text());
                      return value1>value2
                  })
              },function(){
                  $(this).parent().parent().sort(function(dom1,dom2){
                      var value1=parseInt(dom1.find('td:eq('+i+')').text());
                       var value2=parseInt(dom2.find('td:eq('+i+')').text());
                      return value1<value2
                  })
              })
           })
       })
    </script>
    <body>
       <table>
         <tr>
            <th>序号</th>
           <th>数量</th>
         </tr>
       <tr>
           <td>10</td>
           <td>10</td>
       </tr>
       <tr>
           <td>1</td>
           <td>2</td>
       </tr>
       <tr>
           <td>11</td>
           <td>27</td>
       </tr>
       <tr>
           <td>9</td>
           <td>2</td>
       </tr>
       </table>
    </body>
</html>

分享到：