jQuery实现表格前端排序功能详解

本文主要介绍了jquery实现的表格前端排序功能,涉及jquery针对表格元素的获取、遍历及事件响应相关操作技巧,需要的朋友可以参考下，希望能帮助帮到大家。

本文实例讲述了jQuery实现的表格前端排序功能。分享给大家供大家参考，具体如下：

表格前端按列排序

依赖jQuery(本例使用jQuery-1.8.2)

1.初始化方法

立即学习“前端免费学习笔记（深入）”；

(function($){
  //插件
  $.extend($,{
    //命名空间
    sortTable:{
      sort:function(tableId,Idx){
        var table = document.getElementById(tableId);
        var tbody = table.tBodies[0];
        var tr = tbody.rows;
        var trValue = new Array();
        for (var i=0; i0){
                var num1 =value1.substring(0,index1);
                var num2 =value1.substring(index1+1,value1.length-1);
                var num3 =value2.substring(0,index2);
                var num4 =value2.substring(index2+1,value2.length-1);
                if(parseFloat(num1)>parseFloat(num3)){
                  return 1;
                }
                if(parseFloat(num1)0){
          for(var k=arrtotal.length; k<0; k-- ){
             tbody.appendChild(trValue[arrtotal[k]]);
          }
        }
        //tbody.appendChild(trValue[index]);
        tbody.appendChild(fragment); //将排序的结果替换掉之前的值
        tbody.sortCol = Idx;
      }
    }
  });
})(jQuery);

2.页面函数

蝉妈妈AI

电商人专属的AI营销助手

下载

function desc_change(id,str){
   $("#desc_1").html("日期");
   $("#desc_2").html("ID");
   $("#desc_3").html("类别");
   $("#"+id).html(str);
}
function desc(id,str){
  var htmlstr =$("#"+id).text().trim();
  var c =str;
  if(htmlstr==str){
    c=str+'↓';
    $("#"+id).html(c);
  }else if(htmlstr==str+'↓'){
    c=str+'↑'
    $("#"+id).html(c);
  }else if(htmlstr==str+'↑'){
    c=str+'↓'
    $("#"+id).html(c);
  }
  desc_change(id,c)
}

3.DOM结构

    

    

        
日期
        
ID
      
类别
    
    
    

     

        
201870601
        
汇总
        
新闻
     
    

相关推荐：

jquery实现表格无刷新分页

基于jQuery实现表格数据的动态添加与统计的代码_jquery

用JQuery实现表格隔行变色和突出显示当前行的代码_jquery