表格排序的javascript代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
/*
 * 表格怕徐中用到的小工具
 * 
 *  
 */
 
 
var CustomFunctions = {  
    //获取子节点的集合（ie，ff通用）  
    getChildNodes:function(node){  
        var arr = [];  
        var nodes = node.childNodes;  
        for(var i in nodes){  
            if(nodes[i].nodeType == 1){ //查找元素节点  
                arr.push(nodes[i]);  
            }  
        }  
        return arr;
    },  
    //获取第一个元素子节点（ie，ff通用）  
    getFirstElementChild : function(node){  
        return node.firstElementChild ? node.firstElementChild : node.firstChild ;  
    },  
    //获取最后一个元素子节点（ie，ff通用）  
    getLastElementChild : function(node){  
        return node.lastElementChild ? node.lastElementChild : node.lastChild ;  
    },  
    //获取上一个相邻节点（ie，ff通用）  
    getPreviousSibling : function(node){  
        //找到上一个节点就返回节点，没找到就返回null  
        do{  
            node = node.previousSibling;  
        }while(node && node.nodeType!=1)  
        return node;  
    },  
    //获取下一个相邻节点 （ie，ff通用）  
    getNextSibling : function(node){  
        //找到下一个节点就返回节点，没找到就返回null  
        do{  
            node = node.nextSibling;  
        }while(node && node.nodeType!=1)  
        return node;  
    }///////////////,  
};  
   
/*清除字符串前后的空格*/  
String.prototype.trim=function(){  
    return this.replace(/^\s*|\s*$/,"");  
};  
   
/* 
查找元素： 
$q("div"):bytagname 
$q(".l"):byclassname 
$q("#l"):byid 
$q("$name"):byname 
selector:选择符 
parentElement:父元素 
*/  
window.$q = function(selector,parentElement){  
    if(selector && (typeof selector) === 'string'){  
        selector = selector.trim();//去掉前后空格  
        var parentEl = parentElement || document;  
        var nodeArr = new Array();    
        var firstChar = selector.substr(0,1);   //取得第一个字符  
        //以#开头，表示根据ID查找  
        if(firstChar === '#'){  
            return parentEl.getElementById(selector.substr(1));  
        }  
        //以$开头，根据name查找  
        else if(firstChar === '$'){  
            var all = parentEl.getElementsByTagName("*");  
            for(var i=0;i<all.length;i++){  
                var name = all[i].getAttribute("name");  
                if(name === selector.substr(1)){  
                    nodeArr.push(all[i]);  
                }  
            }  
            delete i;  
            return nodeArr;  
        }  
        //以.开头，根据class名查找  
        else if(firstChar === '.'){  
            var className = selector.substr(1);  
            if(parentEl.getElementsByClassName){  
                return parentEl.getElementsByClassName(className);  
            }  
            else{  
                var childList = parentEl.getElementsByTagName("*");  
                for(var i=0;i<childList.length;i++){  
                    var nodeClassName = childList[i].className;  
                    var classNameArr = nodeClassName.split(' ');  
                    for(var j=0;j<classNameArr.length;j++){  
                        if(classNameArr[j]===className){  
                            nodeArr.push(childList[i]);  
                        }  
                    }  
                    delete j;  
                }  
                delete i;  
                return nodeArr;  
            }  
        }  
        //否则，根据标签名查找  
        else{  
            return parentEl.getElementsByTagName(selector);  
        }  
           
    }  
    else{  
        return document.all || document.getElementsByTagName("*");  
    }  
   
};
    /*
    * 用于页面简单排序的小工具
    * 
    * 
    */
    /* 
    全局变量 
    ID:    保存插入数据的编号 
    color：保存原来的背景色 
    */
    //转换数据类型,v为值，dataType为数据类型  
    function convert(v, dataType) {
        switch (dataType) {
            case "int":
                return parseInt(v);
            case "float":
                return parseFloat(v);
            case "date":
                return (new Date(Date.parse(v)));
            default:
                return v.toString();
        }
    }
    //排序函数,index为索引，type为数据类型  
    function pai(index, dataType) {
        if (dataType === "汉字") {
            return function compare(a, b) {
                var str1 = convert(a.cells[index].innerHTML, dataType);
                var str2 = convert(b.cells[index].innerHTML, dataType);
                return str1.localeCompare(str2);
            };
        } else {
            return function compare(a, b) {
                //var str1 = convert(a.cells[index].firstChild.nodeValue,dataType);  
                //var str2 = convert(b.cells[index].firstChild.nodeValue,dataType);  
                var str1 = convert(a.cells[index].innerHTML, dataType); //两种方法效果一样  
                var str2 = convert(b.cells[index].innerHTML, dataType);
                if (str1 < str2) {
                    return -1;
                } else if (str1 > str2) {
                    return 1;
                } else {
                    return 0;
                }
            };
        }
    }
    //表格排序方法，*为必须的参数
    //*tableID：要排序的表格ID
    //*index：按哪列的内容进行排序，从0开始
    //dataType：缺省按照string类型对比，可用值有int,float,date,汉字
    function sortTable(tableID, index, dataType) {
        var tab = $q("#" + tableID); //获取表格的ID  
        var td = tab.tBodies[0]; //获取表格的tbody  
        var newRows = td.rows;   //获取tbody里的所有行  
        var arr = new Array();   //定义arr数组用于存放tbody里的行  
        //用循环将所有行放入数组  
        for (var i = 0; i < newRows.length; i++) {
            arr.push(newRows[i]);
        }
        //判断最后一次排序的列是否与现在要进行排序的列相同，如果是就反序排列  
        if (tab.sortCol == index) {
            arr.reverse();
        } else {
            //使用数组的sort方法，传进排序函数  
            arr.sort(pai(index, dataType));
        }
        var oFragment = document.createDocumentFragment(); //创建文档碎片  
        for (var i = 0; i < arr.length; i++) {  //把排序过的aTRs数组成员依次添加到文档碎片  
            if (i % 2 == 1) {
                oFragment.appendChild(arr[i]);
            } else {
                oFragment.appendChild(arr[i]);
            }
        }
        td.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新  
        tab.sortCol = index;  //记录最后一次排序的列索引  
    }
</script>
点击表头进行排序，注意表头要放到thead标签内容<br />
<table id="tb" border="1">
<thead><tr><td onclick="sortTable('tb',0,'int')">ID</td><td onclick="sortTable('tb',1)">Name</td></tr></thead>
<tr><td>1</td><td>showbo1</td></tr>
<tr><td>3</td><td>showbo3</td></tr>
<tr><td>4</td><td>showbo4</td></tr>
<tr><td>5</td><td>showbo5</td></tr>
<tr><td>2</td><td>showbo2</td></tr>
</table>