js table 排序

不知道我这样想可不可以。JS可以获取Table里的每一项。
JS可以删除原Table。
JS可以动态生成Table。所以我的想法是获取原Table里的每一个Row，然后根据Row的排序字段进行排序。
把原Table删除或隐藏（display:none）
最后动态生成一个排序之后的Table

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

function   GoSort()     {           //声明数据变量ary           var   ary   =   new   Array();           //循环table1   其中的i=1为table的第二行,因为第一行为标题,length-1因为最后一行为总计   这两行不在排序之内           for(var   i=1;i <table1.rows.length-1;i++)           {                     //这里是给ary数组赋值,但我不明白的是,我的table有三列,为什么这里只用了一个得到那个要排序的金额还有table1.rows[i]这个有什么用                   ary[i]   =   new   Array(parseInt(table1.rows[i].cells[1].childNodes[1].innerHTML),table1.rows[i]);                   /***********************************是按金额排序,这个作为标准,   把当前的tr放在数据中,好处是在moveRow   的时候通过这个tr可取它变化后的rowIndex就是行的索引,如果是传当前的rowIndex,                   当作一次moveRow后就全部变化了******************************************/           }           //调用sort这里面完全看不懂           ary   =   ary.sort(DoSort);       /*********************这里不用返回也可以,ary.sort(     DoSort)就可,对这个数组排序,   DoSort是一个自定义的函数,用来制定排序标准********************************/                                                                                             //循环ary数组           for(var   i=0;i <ary.length-1;i++)         {                 //这里不知道干什么               table1.moveRow(ary[i][1].rowIndex,i+1);                             /**********************************               ary[i][1]是保存的tr.                 tr的rowIndex是源行,i+1   是移动的目标的行数.               此时数据是按金额大小排序了的.这个tr位置将移到   i+1   即从2行开始(头行不考虑)               *************************************/         }     }     function   DoSort(e1,e2)     {         //调用sort这里面完全看不懂   e1,e2是干什么用的           return   e2[0]   -e1[0];           /******************************e1就是第前数组的前一个对象,e2是另一个,因为这个数据中存的对象也是个数组,我们是按                     这个数的第一个元素是金额,按金额大小排序.     }
表格排序利用javascript直接在客户端对表格进行排序数组sort 方法返回一个元素已经进行了排序的 Array 对象（注意参数设置）
localeCompare 方法返回一个值，指出在当前的区域设置中两个字符串是否相同（设置sort参数）
reverse 方法返回一个元素顺序被反转的 Array 对象（用于反转排序顺序）对单列表格排序1 为表格头部创建<thead/>元素，为存放数据的列创建<tbody/>元素
2 获取<tbody/>元素和它所包含的行的引用：
  var oTable = document.getElementById(sTableID);
  var oTBody = oTable.tBodise[0];
  var colDataRows = oTBody.rows;
3 创建一个数组，并将<tr/>元素引用放入其中
  var aTRs = new Array;
  for(var i=0; i < colDataRows.length; i++){
    aTRs.push(colDataRows[i]);
  }
4 对新数组进行排序
  比较函数：
  function compareTRs(oTR1, oTR2){
    var sValue1 = oTR1.cell[0].firstchild.nodeValue;
    var sValue2 = oTR2.cell[0].firstchild.nodeValue;
    return sValue1.localeCompare(sValue2);
  }
  aTRs.sort(compareTRs);
5 创建文档碎片储存排好序的<tr/>元素
  var oFragment = document.createDocumentFragment();
  for(var i=0; i < aTRs.length; i++){
    oFragment.appendChile(aTRs[i]);
  }
6 用appendChile方法把排好序的<tr/>元素添加到<tbody/>上
  oTBody.appendChile(oFragment);
7 在<thead/>元素的标签上添加onclick事件，触发排序事件
对多列表格进行排序1 为表格头部创建<thead/>元素，为存放数据的列创建<tbody/>元素（同上）
2 获取<tbody/>元素和它所包含的行的引用（同上）
3 创建一个数组，并将<tr/>元素引用放入其中
  var aTRs = new Array;
  for(var i=0; i < colDataRows.length; i++){
    aTRs[i] = colDataRows[i];
  }
4 对新数组进行排序
  由于用于排序的比较函数只能有两个参数，所以创建一个比较函数生成器来返回一个比较函数的函数
  function generateCompareTRs(iCol) {
   return function compareTRs(oTR1, oTR2) {
           var sValue1 = oTR1.cell[iCol].firstchild.nodeValue;
           var sValue2 = oTR2.cell[iCol].firstchild.nodeValue;
           return sValue1.localeCompare(sValue2);
          };
  }
  //iCol是列的索引
  aTRs.sort(generateCompareTRs(1));
  //对数组进行排序
5 创建文档碎片储存排好序的<tr/>元素（同上）
6 用appendChile方法把排好序的<tr/>元素添加到<tbody/>上（同上）
7 在<thead/>元素的标签上添加onclick事件，触发排序事件
  注意要传递要排序的列的索引
逆序排列
可以在第一次排序之后，再触发排序事件的时候用reverse函数反转排序数组
aTRs.reverse();
对不同的数据类型进行排序创建转换函数
function convert(sValue, sDataType) {
swich(sDataType) {
  case "int":
   return parseInt(sValue);
  case "float":
   return parseFloat(sValue);
  case "date":
   return new Date(Date.parse(sValue));
  default:
   return sValue.toString();
}
}排序函数
对于数字和日期localeCompare不支持，所以使用大于小于号
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
         var vValue1 = convert(oTR1.cell[iCol].firstchild.nodeValue, sDataType);
         var vValue2 = convert(oTR2.cell[iCol].firstchild.nodeValue, sDataType);
         if (vValue1 < vValue2) {
          return -1;
         } else if (vValue1 > vValue2) {
          return 1;
         } else {
          return 0;
         }
        };
}
高级排序
对于不能进行正常排序的列（如链接、图像等），可以给<td/>添加value属性，再用getAttribute获取其值，并用来排序。
注意：对于严格的xhtml来说，这样做是不合法的，变通的方法是在title中放这个值，或设置一个不可见的div存放这个值
里面有些错误
不过应该看的懂了
呵呵，看你怎么个排序法，一般的JS排序table，网上多的是
<html > <head >
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312" >
<title >JK:支持民族工业,尽量少买X货 </title >
<script   language="javascript"   srccccc="CommonJS_RowSort.js" >
function   rowSortFun(tdObj,sortType){
var   d1=new   Date();
    var   currentColumnIndex=tdObj.cellIndex;
    var   currentTbody=tdObj.parentNode.parentNode;
    var   rowsArray=new   Array();
    var   objTd=null;
    for(   var   i=1;i <currentTbody.rows.length;i++){
    objTr=currentTbody.rows[i]
        rowsArray[i-1]=new   Array(objTr.cells[currentColumnIndex].innerHTML,objTr);
    }
    rowsArray.sort(getSortFun(sortType));
    for(var   i=0;i <rowsArray.length;i++){
        currentTbody.appendChild(rowsArray[i][1]);
    }
    alert("行数"+rowsArray.length+";所花毫秒数"+(new   Date()-d1));
} function   getSortFun(sortType){
    if("stringTd"==sortType){
        return   function   (trObj1,trObj2){return   (trObj2[0].toUpperCase() >trObj1[0].toUpperCase())?1:-1}
    }
    else   if("numberTd"==sortType){
        return   function   (trObj1,trObj2)   {   return   ((parseInt(trObj2[0])-parseInt(trObj1[0])) >0)?1:-1}
    }
} </script >
<style >
.headerTr{background-color:#cccccc;}
</style >
</head > <body >
<div   style="font-size:10pt;" >
注1：用法：需要排序的字段头里：<td   columnContentType="Text"   onclick="rowSortFun(this);">   。   <br/ >
注2：鉴于很多提出要求前台排序的人，其实并不是真的需要前台排序，所以强列建议慎用前台排序。   <br/ >
  <br/ >                       <br/ >
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/ >
注-----：JK： <a   href="mailTo:[email protected]?subject=RowSortSample" >[email protected] </a > <br/ >
<hr/ >
</div > <table   border="1"   width="100%"   >
    <tr   class="headerTr" >
        <td   columnContentType="Text"   onclick="rowSortFun(this, 'stringTd');"   >   字符串或其它 </td >
        <td   columnContentType="Number"   onclick="rowSortFun(this, 'numberTd');"   >数字 </td >
        <td   >输入框(不需要排序) </td >
    </tr >
    <tr > <td >g </td > <td >37 </td > </tr >
<tr > <td >i </td > <td >17 </td > </tr >
<tr > <td >l </td > <td >4 </td > </tr >
<tr > <td >g </td > <td >37 </td > </tr >
<tr > <td >e </td > <td >6 </td > </tr >
<tr > <td >n </td > <td >48 </td > </tr >
<tr > <td >e </td > <td >32 </td > </tr >
<tr > <td >i </td > <td >29 </td > </tr >
<tr > <td >f </td > <td >34 </td > </tr >
<tr > <td >f </td > <td >15 </td > </tr >
<tr > <td >b </td > <td >45 </td > </tr >
<tr > <td >g </td > <td >15 </td > </tr >
<tr > <td >n </td > <td >38 </td > </tr >
<tr > <td >a </td > <td >7 </td > </tr >
<tr > <td >b </td > <td >47 </td > </tr >
<tr > <td >n </td > <td >28 </td > </tr >
<tr > <td >f </td > <td >11 </td > </tr >
<tr > <td >i </td > <td >47 </td > </tr >
<tr > <td >n </td > <td >22 </td > </tr >
<tr > <td >e </td > <td >25 </td > </tr >
<tr > <td >n </td > <td >40 </td > </tr >
<tr > <td >l </td > <td >44 </td > </tr >
<tr > <td >h </td > <td >6 </td > </tr >
<tr > <td >h </td > <td >31 </td > </tr >
<tr > <td >g </td > <td >32 </td > </tr >
<tr > <td >a </td > <td >39 </td > </tr >
<tr > <td >j </td > <td >25 </td > </tr >
<tr > <td >a </td > <td >8 </td > </tr >
<tr > <td >h </td > <td >49 </td > </tr >
<tr > <td >l </td > <td >25 </td > </tr >
<tr > <td >h </td > <td >26 </td > </tr >
<tr > <td >l </td > <td >35 </td > </tr >
<tr > <td >k </td > <td >9 </td > </tr >
<tr > <td >a </td > <td >25 </td > </tr >
<tr > <td >m </td > <td >5 </td > </tr >
<tr > <td >g </td > <td >30 </td > </tr >
<tr > <td >m </td > <td >2 </td > </tr >
<tr > <td >k </td > <td >14 </td > </tr >
<tr > <td >n </td > <td >34 </td > </tr >
<tr > <td >f </td > <td >11 </td > </tr >
<tr > <td >b </td > <td >40 </td > </tr >
<tr > <td >i </td > <td >45 </td > </tr >
<tr > <td >b </td > <td >21 </td > </tr >
<tr > <td >i </td > <td >22 </td > </tr >
<tr > <td >i </td > <td >15 </td > </tr >
<tr > <td >g </td > <td >7 </td > </tr >
<tr > <td >f </td > <td >27 </td > </tr >
<tr > <td >j </td > <td >38 </td > </tr >
<tr > <td >h </td > <td >19 </td > </tr >
<tr > <td >b </td > <td >39 </td > </tr >
<tr > <td >c </td > <td >43 </td > </tr >
<tr > <td >n </td > <td >47 </td > </tr >
<tr > <td >h </td > <td >6 </td > </tr >
<tr > <td >d </td > <td >40 </td > </tr >
<tr > <td >l </td > <td >42 </td > </tr >
<tr > <td >j </td > <td >0 </td > </tr >
<tr > <td >n </td > <td >47 </td > </tr >
<tr > <td >c </td > <td >47 </td > </tr >
<tr > <td >f </td > <td >19 </td > </tr >
<tr > <td >f </td > <td >2 </td > </tr >
<tr > <td >i </td > <td >18 </td > </tr >
<tr > <td >k </td > <td >39 </td > </tr >
<tr > <td >k </td > <td >15 </td > </tr >
<tr > <td >n </td > <td >11 </td > </tr >
<tr > <td >c </td > <td >4 </td > </tr >
<tr > <td >n </td > <td >2 </td > </tr >
<tr > <td >l </td > <td >9 </td > </tr >
<tr > <td >g </td > <td >48 </td > </tr >
<tr > <td >h </td > <td >31 </td > </tr >
<tr > <td >i </td > <td >4 </td > </tr >
</table >
</body > </html >
http://www.kryogenix.org/code/browser/sorttable/
<HTML>

<style type="text/css">
th {background-color: #999999;
   cursor:pointer}
td {background-color: #999900;
  text-align:center}
</style><SCRIPT LANGUAGE="javaScript">
function sortCells(i) {
var column=document.all.ot1.rows(1).cells.length;
var row=document.all.ot1.rows.length;
var temp;
//定义二维数组，因为JAVASCRIPT不支持直接定义二维数组
var Ar=new Array(row-1);
for(x=0;x<row-1;x++){
Ar[x]=new Array(column);
}
//初始化二维数组
for(x=1;x<row;x++){
for(y=0;y<column;y++){
  Ar[x-1][y]=document.all.ot1.rows(x).cells(y).innerText;
}
}
//数组排序--这个可以汉字排序
Ar.sort(function(a,b){return a[i].localeCompare(b[i])});
//数组排序--这个非汉字排序
/*for(x=0;x<row-1;x++){
for(y=1;y<row-1;y++){
  temp=Ar[y-1];
  if(Ar[y-1][i]>Ar[y][i])
   {
   Ar[y-1]=Ar[y];
   Ar[y]=temp;
  }
}
}*///输出排序好的数组
for(x=1;x<row;x++){
for(y=0;y<column;y++){
document.all.ot1.rows(x).cells(y).innerText=Ar[x-1][y];
}
}
}</SCRIPT>
<BODY>
<TABLE id="ot1" align="center" width="40%" Height="40%" id=oTable border=1>
<TR>
<TH onclick="sortCells(0)">列1</TH>
<TH onclick="sortCells(1)">列2</TH>
<TH onclick="sortCells(2)">列3</TH>
<TH onclick="sortCells(3)">列4</TH>
</TR>
<TR>
<TD>1</TD><TD>a</TD><TD>1</TD><TD>啊</TD>
</TR>
<TR>
<TD>3</TD><TD>b</TD><TD>4</TD><TD>不</TD>
</TR>
<TR>
<TD>5</TD><TD>c</TD><TD>4</TD><TD>才</TD>
</TR>
<TR>
<TD>4</TD><TD>d</TD><TD>7</TD><TD>的</TD>
</TR>
<TR>
<TD>8</TD><TD>e</TD><TD>9</TD><TD>饿</TD>
</TR>
<TR>
<TD>2</TD><TD>f</TD><TD>3</TD><TD>发</TD>
</TR>
<TR>
<TD>6</TD><TD>g</TD><TD>5</TD><TD>个</TD>
</TR>
<TR>
<TD>5</TD><TD>h</TD><TD>2</TD><TD>和</TD>
</TR>
</TABLE>
</BODY>
</HTML>
如果我的table的<td>值是根据数据库动态查询出来的值呢