jsp+js实现可排序表格

首先，定义一个js：tableSort.js:functionsort(tableId,sortColumn,nodeType){vartable=document.getElementById(theTable);vartableBody=table.tBodies[0];vartableRows=tableBody.rows;varrowArray=newArray();for(vari=0;itableRows.length;i++){rowArray[i]=tableRows[i];}if(table.sortColumn==sortColumn){rowArray.reverse();}else{rowArray.sort(generateCompareTR(sortColumn,nodeType));}vartbodyFragment=document.createDocumentFragment();for(vari=0;irowArray.length;i++){tbodyFragment.appendChild(rowArray[i]);}tableBody.appendChild(tbodyFragment);table.sortColumn=sortColumn;}functiongenerateCompareTR(sortColumn,nodeType){returnfunctioncompareTR(trLeft,trRight){varleftValue=convert(trLeft.cells[sortColumn].firstChild.nodeValue,nodeType);varrightValue=convert(trRight.cells[sortColumn].firstChild.nodeValue,nodeType);if(leftValuerightValue){return-1;}else{if(leftValuerightValue){return1;}else{return0;}}};}functionconvert(value,dataType){switch(dataType){caseint:returnparseInt(value);casefloat:returnparseFloat(value);casedate:returnnewDate(Date.parse(value));default:returnvalue.toString();}}然后是使用：%@pagelanguage=javaimport=java.util.*pageEncoding=UTF-8%%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;%!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENhtmlheadbasehref=%=basePath%titleMyJSP'tabel.jsp'startingpage/titlemetahttp-equiv=pragmacontent=no-cachemetahttp-equiv=cache-controlcontent=no-cachemetahttp-equiv=expirescontent=0metahttp-equiv=keywordscontent=keyword1,keyword2,keyword3metahttp-equiv=descriptioncontent=Thisismypage!--linkrel=stylesheettype=text/csshref=styles.css--scripttype=text/javascriptsrc=userjs/tableSort.js/script/headbodytableid=theTablealign=centerborder=1theadtrtd标题1/tdtdonclick=sort(theTable,1,'int')标题2/tdtdonclick=sort(theTable,2,'int')标题3/tdtdonclick=sort(theTable,3,'int')标题4/tdtdonclick=sort(theTable,4,'int')标题5/tdtdonclick=sort(theTable,5,'int')标题6/tdtdonclick=sort(theTable,6,'int')标题7/td/tr/theadtbodytrtd1/tdtd2/tdtd3/tdtd4/tdtd5/tdtd6/tdtd7/td/trtrtd2/tdtd3/tdtd4/tdtd5/tdtd6/tdtd7/tdtd1/td/trtrtd3/tdtd4/tdtd5/tdtd6/tdtd7/tdtd1/tdtd2/td/trtrtd4/tdtd5/tdtd6/tdtd7/tdtd1/tdtd2/tdtd3/td/trtrtd5/tdtd6/tdtd7/tdtd1/tdtd2/tdtd3/tdtd4/td/trtrtd6/tdtd7/tdtd1/tdtd2/tdtd3/tdtd4/tdtd5/td/tr/tbody/table/body/html之后就可以看到效果了。