表格排序JavaScript实现-优快云博客

本文链接：https://blog.youkuaiyun.com/super_ufo/article/details/4563707

本文介绍了一个使用JavaScript实现的表格排序功能，支持整数、浮点数及字符串类型的排序，并通过改变图标来显示当前的排序状态（升序或降序）。此方法采用冒泡排序算法，适用于简单的前端表格数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中调用： 1 => array("name" => $arrLang["contacts_name"]."<img
src = '../../images/small_desc.gif' id='contacts_name_sort' onclick = 'SortField(/"contactsTable/",1,/"string/",this)' align='absmiddle' style='cursor:hand;' alt='".$arrLang['desc']."'>","property1" => "")

/*表格的冒泡排序   table 支持一层子节点排序
* tableid 要排序表格的id
* nColNum 排序所在的列
* strDataType 数据类型
* nSortOrder 1 降序 -1 升序当为升序图标点击则 nSortOrder = -1; 加载降序图标，
*/
function SortField(tableid,nColNum,strDataType,selfObj){ //冒泡排序
     srcPath = selfObj.src.split("/");
     srcName = srcPath[srcPath.length-1];

    if(srcName == "small_asc.gif"){
    selfObj.src = "../../images/small_desc.gif";
       nSortOrder = -1;
}else{
    selfObj.src = "../../images/small_asc.gif";
       nSortOrder = 1;
}

   table = document.getElementById(tableid);
   var length = table.rows.length;
   for(var i= 0;i<length;i++){ //由于表头还有一行，故i从1开始
  var exchanged=false;
  for(var j=length-1;j>i;j--){
   if (typeof(table.rows[j].cells[nColNum].childNodes[0].data) == "undefined")
      curcellval = table.rows[j].cells[nColNum].innerText;
   else
      curcellval = table.rows[j].cells[nColNum].childNodes[0].data;

   if (typeof(table.rows[j-1].cells[nColNum].childNodes[0].data) == "undefined")
      cmpcellval = table.rows[j-1].cells[nColNum].innerText;
   else
      cmpcellval = table.rows[j-1].cells[nColNum].childNodes[0].data;

    switch(strDataType){
   case "int":
     if(nSortOrder>0){ //desc
    if(parseInt(curcellval) >
      parseInt(cmpcellval)){
      Swap(table,j,j-1);
      exchanged=true;
    }
     }
     else{
    if(parseInt(curcellval) <
      parseInt(cmpcellval)){
      Swap(table,j,j-1);
      exchanged=true;
    }
     }
     break;
   case "float":
     if(nSortOrder>0){ //desc
    if(parseFloat(curcellval) >
      parseFloat(cmpcellval)){
      Swap(table,j,j-1);
      exchanged=true;
    }
     }
     else{
    if(parseFloat(curcellval) <
      parseFloat(cmpcellval)){
      Swap(table,j,j-1);
      exchanged=true;
    }
     }
     break;
   case "string":
   default:
     if(nSortOrder>0){ //desc
    if(curcellval.toString() >
      cmpcellval.toString()){
      Swap(table,j,j-1);
      exchanged=true;
    }
     }
     else{
    if(curcellval.toString() <
      cmpcellval.toString()){
      Swap(table,j,j-1);
      exchanged=true;
    }
     }
    } //switch
  } //for j
  if (!exchanged) break;
   } //for i
    }

function Swap(table,i,j){

   if(i<0 || j>table.rows.length-1) return;
   if(i<j){
  table.moveRow(i,j);
  table.moveRow(j-1,i);
   }
   else{
  table.moveRow(i,j);
  table.moveRow(j+1,i);
   }
}

function Swap(table,i,j){

   if(i<0 || j>table.rows.length-1) return;
   if(i<j){
  table.moveRow(i,j);
  table.moveRow(j-1,i);
   }
   else{
  table.moveRow(i,j);
  table.moveRow(j+1,i);
   }
}

下附图标：