简单高效的表格排序解决方案

关键字：表格 排序 算法 冒泡法

前言：许多朋友都会有希望能够点击表格标题达到将表格按所选排序的需要，之前也有许多前辈的表格拥有此功能，但他们的代码往往复杂繁多，不适合新手学习使用。偶就是这种看不懂代码的新手：），因此不得已自己写一个表格排序解决方案。

实现方法：表格的moveRow(i,j)方法
此方法含义是将第i行移到第j行去，其他行依次往上或往下排列。

实现算法：冒泡法
冒泡法的原理是将第一个数依次和后面的每一个数比较，（以从大到小排序为例,假设有n个数进行排序）如果发现比这个数大，则与这个数交换位置，这样就会执行n-1次比较，第一轮比较后，排在第一位的一定是最大的一个数。
依次再比较第二个数，这时候需要执行n-2次比较，类推下去一共执行了n-1+n-2+...+3+2+1=n*n/2次比较。

比较内容：row[i].cells[j].innerText
以上方法可以获得表格内容，这是我们用于比较排序而必须的。

好了有了上面前提，我们要让表格排序就非常简单了，我们就用冒泡法对表格进行排序，用上述原理就是用表格每一行的内容比较大小并执行moveRow进行排序。

第一步：一个简单的排序解决方案
<script>
function sort(){
oTable.moveRow(1,2);
}
</script>
<table border="1" id=oTable>
<tr onclick="sort();">
<td width="50%">title1</td>
<td width="50%">title2</td>
</tr>
<tr>
<td width="50%">aa</td>
<td width="50%">1111</td>
</tr>
<tr>
<td width="50%">bb</td>
<td width="50%">2222</td>
</tr>
</table>
点击title1和title2看看是什么效果，是否第二行和第三行轮流交换？

第二、在例一基础上扩展
<script>
function sort(){
var row = event.srcElement.parentElement.parentElement.rows,tbody = event.srcElement.parentElement.parentElement;
for (var i=1;i<row.length-1;i++){
for (var j=1+i;j<row.length;j++){
if (row[i].cells[event.srcElement.cellIndex].innerText > row[j].cells[event.srcElement.cellIndex].innerText){
tbody.moveRow(j,i);
}
}
}
}
</script>
<table border="1">
<tr onclick="sort();">
<td width="50%">title1</td>
<td width="50%">title2</td>
</tr>
<tr>
<td width="50%">aa</td>
<td width="50%">11111</td>
</tr>
<tr>
<td width="50%">bbb</td>
<td width="50%">222222</td>
</tr>
<tr>
<td width="50%">ccc</td>
<td width="50%">33333</td>
</tr>
<tr>
<td width="50%">d</td>
<td width="50%">4444</td>
</tr>
<tr>
<td width="50%">e</td>
<td width="50%">555</td>
</tr>
<tr>
<td width="50%">f</td>
<td width="50%">66</td>
</tr>
<tr>
<td width="50%">bb</td>
<td width="50%">7</td>
</tr>
</table>
如果你能够看懂这个例子，那么你应该不用往下看了，呵呵~~~~
这个例子中用到了以下几个技术点：
1、按所选择的列内容大小排序
2、只需要把第一行作为标题，并在其TR中增加ONCLICK事件即可，无须其他要求，这对于代码独立性有非常重要的意义
3、自动捕捉目标表格属性（前提是以第一行为标题）

第三、增加上顺序和倒序交叉排序，增加按数值比较排序功能
<script>
var issort; //用于保存当前排序状态，以实现轮流顺序倒序排列，strnumber参数用于指定那些列要求按数值大小比较排列。
function sort(strnumber){
issort=!issort;
var row = event.srcElement.parentElement.parentElement.rows,tbody = event.srcElement.parentElement.parentElement;
if (row.length < 3){return null}
for (var i=1;i<row.length-1;i++){
for (var j=1+i;j<row.length;j++){
if (strnumber.indexOf('|'+event.srcElement.cellIndex+'|')>=0){
if (issort){
if (parseFloat(row[i].cells[event.srcElement.cellIndex].innerText.replace(',','')) < parseFloat(row[j].cells[event.srcElement.cellIndex].innerText.replace(',',''))){
tbody.moveRow(j,i);
}
}else{
if (parseFloat(row[i].cells[event.srcElement.cellIndex].innerText.replace(',','')) > parseFloat(row[j].cells[event.srcElement.cellIndex].innerText.replace(',',''))){
tbody.moveRow(j,i);
}
}
}else{
if (issort){
if (row[i].cells[event.srcElement.cellIndex].innerText < row[j].cells[event.srcElement.cellIndex].innerText){
tbody.moveRow(j,i);
}
}else{
if (row[i].cells[event.srcElement.cellIndex].innerText > row[j].cells[event.srcElement.cellIndex].innerText){
tbody.moveRow(j,i);
}
}
}
}
}
}
</script>
<table border="1">
<tr onclick="sort('|1|');">
<td width="50%">title1</td>
<td width="50%">title2</td>
</tr>
<tr>
<td width="50%">aa</td>
<td width="50%">11111</td>
</tr>
<tr>
<td width="50%">bbb</td>
<td width="50%">222222</td>
</tr>
<tr>
<td width="50%">ccc</td>
<td width="50%">33333</td>
</tr>
<tr>
<td width="50%">d</td>
<td width="50%">4444</td>
</tr>
<tr>
<td width="50%">e</td>
<td width="50%">555</td>
</tr>
<tr>
<td width="50%">f</td>
<td width="50%">66</td>
</tr>
<tr>
<td width="50%">bb</td>
<td width="50%">7</td>
</tr>
</table>
现在看看效果有什么不同？

最后：基本上你只需要在你的页面中增加最后的这个过程sort(strnumber),其中strnumber表示要执行数值比较的列，比如上面的表格是第二列按数值比较，因此调用过程是sort('|1|'),如果第10列和第14列要求执行按数值比较则用sort('|9|13|')就可以了（一定要用|分隔）。

好了，上面的代码看上去就知道是新手写的，呵呵，没办法，偶确实是新手~~~~~~~
谢谢