javascript表格排序

< html >
     < head >
     < title > Table Sort Example </ title >
         < script type = " text/javascript " >
         // 比较函数,比较两个行
         function  compareTRs(oTR1,oTR2)
         ... {
            var sValue1 = oTR1.cells[0].firstChild.nodeValue;
            var sValue2 = oTR2.cells[0].firstChild.nodeValue;
            return sValue1.localeCompare(sValue2);
        }
         function  sortTable(sTableID)  ... {
                var oTable = document.getElementById(sTableID);
                var oTBody = oTable.tBodies[0];//找到body
                var colDataRows = oTBody.rows;//获取所有的行
                var aTRs = new Array;
        
                for (var i=0; i < colDataRows.length; i++) ...{
                    aTRs[i] = colDataRows[i];
                }
                //把所有的行的引用放到数组中,然后排序
                aTRs.sort(compareTRs);
                //调用排序函数
                var oFragment = document.createDocumentFragment();//创建文档碎片,更快的重新组织DOM
                for (var i=0; i < aTRs.length; i++) ...{
                    oFragment.appendChild(aTRs[i]);
                }
       
                oTBody.appendChild(oFragment);
            }

         </ script >
     </ head >

     < body >
         < p > Click on the table header to sort  in  ascending order. </ p >
         < table border = " 1 "  id = " tblSort " >
             < thead >
                 < tr >
                     < th onclick = " sortTable('tblSort') "  style = " cursor:pointer " > Last Name </ th >
                 </ tr >
             </ thead >
             < tbody >
                 < tr >
                     < td > Smith </ td >
                 </ tr >
                 < tr >
                     < td > Johnson </ td >
                 </ tr >
                 < tr >
                     < td > Henderson </ td >
                 </ tr >
                 < tr >
                     < td > Williams </ td >
                 </ tr >
                 < tr >
                     < td > Gilliam </ td >
                 </ tr >
                 < tr >
                     < td > Walker </ td >
                 </ tr >
             </ tbody >
         </ table >         
     </ body >
</ html >