<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY><script language=javascript>
String.prototype.isTime = function()
{
var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
if(r==null)return false; var d = new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}
//alert("2002-1-31 12:34:43".isTime());
//alert("2001-2-26 12:54:38".isTime());
//alert("2001-2-26 12:54:78".isTime());
//alert("2002-1-41 12:00:21".isTime());
</script>
<table border="1" id="test">
<tbody>
<tr onclick='if(event.srcElement!=this)tableSort(event.srcElement)'>
<th 
style="cursor:pointer">Last Name</th>
<th 
style="cursor:pointer">First Name</th>
<th 
style="cursor:pointer">Birthday</th>
<th 
style="cursor:pointer">Siblings</th>
<th 
style="cursor:pointer">城市</th>
</tr>
</tbody>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
<td>山东</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
<td>江苏</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
<td>上海</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
<td>山东</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
<td>浙江</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
<td>四川</td>
</tr>
</tbody>
</table><script>
ary = [];
oTR = test.childNodes[1].childNodes;
oTRorder = test.firstChild.firstChild.childNodes;
for(i=0, j=oTR.length; i<j; i++) 
    ary[i] = oTR[i];
for(i=0, j=oTRorder.length; i<j; i++)
    oTRorder[i].order = -1;function tableSort(SortNode){
var time = new Date()
var tempa, tempb, oTD, orders
oTD = SortNode.sourceIndex-SortNode.parentElement.sourceIndex-1; 
orders = SortNode.order = -SortNode.order;
ary.sort(
    function(a,b){
        tempa = a.childNodes[oTD].innerText;
        tempb = b.childNodes[oTD].innerText;
        return tempa<tempb?-orders:tempa==tempb?0:orders;
        }
    )for(i=0; i<oTR.length; i++)
    oTR[i].swapNode(ary[i]);//swap TR nodeswindow.status=new Date()-time;
}
</script>
</BODY>
</HTML>

解决方案 »

  1.   

    <html>
    <head>
    <SCRIPT>
    function sortTable(tb, colum)
    {
    var sortArray = new Array();
    var rowArray = new Array();
    var tbrows = document.all(tb).rows;
    for (var i = 1; i < tbrows.length; i++)
    {
    sortArray.push(tbrows(i).cells(colum).innerText + i);
    rowArray[tbrows(i).cells(colum).innerText + i] = tbrows(i);
    }
    sortArray = sortArray.sort();
    for (var i = 0; i < sortArray.length; i++)
    {
    if (document.all(tb).rows[i+1] != rowArray[sortArray[i]])
    {
    document.all(tb).rows[i+1].swapNode(rowArray[sortArray[i]]);
    }
    }
    }
    </SCRIPT>
    </head>
    <body onload="">
    <form>
    <table border="1" id="tblSort">
                    <tr>
                        <th onclick="sortTable('tblSort', 0)" 
                            style="cursor:pointer">Last Name</th>
                        <th onclick="sortTable('tblSort', 1)" 
                            style="cursor:pointer">First Name</th>
                        <th onclick="sortTable('tblSort', 2, 'date')" 
                            style="cursor:pointer">Birthday</th>
                        <th onclick="sortTable('tblSort', 3, 'int')" 
                            style="cursor:pointer">Siblings</th>
    <th onclick="sortTable('tblSort', 4)" 
                            style="cursor:pointer">城市</th>
                    </tr>                <tr>
                        <td>Smith</td>
                        <td>John</td>
                        <td>7/12/1978</td>
                        <td>2</td>
    <td>山东</td>
                    </tr>
                    <tr>
                        <td>Johnson</td>
                        <td>Betty</td>
                        <td>10/15/1977</td>
                        <td>4</td>
    <td>江苏</td>
                    </tr>
                    <tr>
                        <td>Henderson</td>
                        <td>Nathan</td>
                        <td>2/25/1949</td>
                        <td>1</td>
    <td>上海</td>
                    </tr>
                    <tr>
                        <td>Williams</td>
                        <td>James</td>
                        <td>7/8/1980</td>
                        <td>4</td>
    <td>山东</td>
                    </tr>
                    <tr>
                        <td>Gilliam</td>
                        <td>Michael</td>
                        <td>7/22/1949</td>
                        <td>1</td>
    <td>浙江</td>
                    </tr>
                    <tr>
                        <td>Walker</td>
                        <td>Matthew</td>
                        <td>1/14/2000</td>
                        <td>3</td>
    <td>四川</td>
                    </tr>        </table>
    </form>
    </body>
    </html>
    看看是不是这样