javascript 排序-优快云博客

本文链接：https://blog.youkuaiyun.com/j2eejia/article/details/1499916

本文介绍了一种JavaScript实现的表格排序方法，该方法可以根据不同的列对表格数据进行升序或降序排列，并通过更改图标来指示当前的排序状态。

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

<SCRIPT language=JavaScript type=text/javascript>
//主要用于页面排序
var curObj;
var globalColIndex=0;
//表示没有排序
var noSort="0";
//表示升序
var ascSort="1";
//表示降序
var descSort="2";
var tableRowDataArr=new Array();
//数据数组
var theDataRowsArr=new Array();
//标题数组
var theTitleRowsArr=new Array();
//列排序标记数组
var tableColSortFlagArr=new Array();
function sortTable(tempColIndex,imageName) {
var prefix_str="imagerorder";
var suffix_str="_0";
var image_path="/test/sort/";
sortTableForProceeding(tempColIndex,imageName,tableRowDataArr,theDataRowsArr
,theTitleRowsArr,tablesortlist,tableColSortFlagArr,prefix_str,suffix_str,image_path);
}
</SCRIPT>

//排序函数脚本
function sortTableForProceeding(tempColIndex,imageName,tableRowDataArr
   ,theDataRowsArr,theTitleRowsArr,tablesortlist,tableColSortFlagArr
   ,prefix_str,suffix_str
   ,image_path){
var start=new Date()
var i;
var imageObj=null;
if(tablesortlist.rows.length==2){
    if(tablesortlist.rows[1].cells.length==1){
      return ;
    }
}
initColSortFlag(tablesortlist,tableColSortFlagArr);
//把第一行的标题行数据装入数组中
for(i=0;i<tablesortlist.rows.length;i++) {
    theTitleRowsArr[i]=new Array(tablesortlist.rows[i].cells[tempColIndex].innerText.toLowerCase(),tablesortlist.rows[i].outerHTML);
}
//alert(tablesortlist.rows[1].cells[tempColIndex].innerText.toLowerCase());
//把数据装入数组中
for(i=0;i<tablesortlist.rows.length;i++) {
    //过滤掉标题行
    if(i==0){
      theDataRowsArr[i]=new Array("","");
    }
    else{
      theDataRowsArr[i]=new Array(tablesortlist.rows[i].cells[tempColIndex].innerText.toLowerCase(),tablesortlist.rows[i].outerHTML);
    }
    //alert(theDataRowsArr[i]);
    //alert("2:"+tablesortlist.rows[i].outerHTML);
}
//排序
//alert(tableColSortFlagArr[tempColIndex]+"&tempColIndex:"+tempColIndex);
//一开始是没有排序
if(tableColSortFlagArr[tempColIndex]==noSort){
    theDataRowsArr.sort(sortRowsDesc);
    tableColSortFlagArr[tempColIndex]=descSort;
}
else{
    if(tableColSortFlagArr[tempColIndex]==ascSort){
      theDataRowsArr.sort(sortRowsDesc);
      tableColSortFlagArr[tempColIndex]=descSort;
    }
    else{
      if(tableColSortFlagArr[tempColIndex]==descSort){
        theDataRowsArr.sort(sortRowsAsc);
        tableColSortFlagArr[tempColIndex]=ascSort;
       }
    }
}
//alert(tableColSortFlagArr[tempColIndex]);
var str='';
var tempStr='';
for(i=0;i<theDataRowsArr.length;i++) {
        if(i==0){
          str+=theTitleRowsArr[i][1];
          str+=theDataRowsArr[i][1];
        }
        else{
          tempStr=theDataRowsArr[i][1];
          if(i % 2==0){
            if(tempStr.indexOf('<TR class=rowoutdark2 align=middle>')>=0){
              tempStr=tempStr.replace('<TR class=rowoutdark2 align=middle>','<TR class=rowoutdark align=middle>');
            }
          }
          else{
            if(tempStr.indexOf('<TR class=rowoutdark align=middle>')>=0){
              tempStr=tempStr.replace('<TR class=rowoutdark align=middle>','<TR class=rowoutdark2 align=middle>');
            }
          }
          theDataRowsArr[i][1]=tempStr;
   str+=theDataRowsArr[i][1];
}
}
tablesortlist.outerHTML='<table id="tablesortlist" width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#A0A0A0">'+str+'</table>'
curObj=null;
   //变换图片
   imageObj=getFormObjectByObjectName(imageName);
   //alert("adfsaf:"+imageObj+"&I:"+tableColSortFlagArr[tempColIndex]);
   if(imageObj!=null){
     if(tableColSortFlagArr[tempColIndex]==ascSort){
       imageObj.setAttribute("src",image_path+"images/downarrow.gif");
       imageObj.setAttribute("width","10");
       imageObj.setAttribute("height","10");
       //alert("adfsaf:"+imageObj+"&I:"+tableColSortFlagArr[tempColIndex]);
     }
     if(tableColSortFlagArr[tempColIndex]==descSort){
      imageObj.setAttribute("src",image_path+"images/uparrow.gif");
      imageObj.setAttribute("width","10");
      imageObj.setAttribute("height","10");
      //alert("adfsaf:"+imageObj+"&I:"+tableColSortFlagArr[tempColIndex]);
     }
   }
   //alert(imageObj);
   //清除图片
   for(i=0;i<tablesortlist.rows.length;i++) {
    if(i==0){
      for (j=0;j<tablesortlist.rows(i).cells.length;j++)
      {
        if(tempColIndex!=j){
          tableColSortFlagArr[j]=noSort;
        }
        if(tableColSortFlagArr[j]==noSort){
          //alert("j:"+j+"&tableColSortFlagArr:"+tableColSortFlagArr[j]);
          imageObj=getFormObjectByObjectName(prefix_str+j+suffix_str);
          if(imageObj!=null){
            imageObj.setAttribute("src","");
            imageObj.setAttribute("width","0");
            imageObj.setAttribute("height","0");
          }
        }
      }
    }
    break;
}
return ;
}

以下是使用示例，排序页面如下：

<TABLE id=tablesortlist cellSpacing=1 cellPadding=3 width="100%"
      align=center bgColor=#a0a0a0 border=0>
        <TBODY>
        <TR class=rowoutlight align=middle bgColor=#c9d8ff>
          <TD width="5%">全选 <INPUT type=checkbox
            value=checkbox name=chkall></TD>
          <TD onclick="javascript:sortTable('1','imagerorder1_0');"
            width="15%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">项目名称</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder1_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('2','imagerorder2_0');"
            width="15%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">项目类型</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder2_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('3','imagerorder3_0');"
            width="14%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">项目类别</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder3_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('4','imagerorder4_0');"
            width="10%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">申请者名称</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder4_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('5','imagerorder5_0');"
            width="13%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">联系电话</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder5_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('6','imagerorder6_0');">
            <DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">申报时间</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder6_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('7','imagerorder7_0');">
            <DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">市级</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder7_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('8','imagerorder8_0');">
            <DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">资金合计</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder8_0>
        </DIV></TD></TR>