JS는 테이블 필드 sorting_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

1. 비교 함수 생성기:

코드 복사 코드는 다음과 같습니다.

 /* *
 * 비교 함수 생성기
 * 
 * @param iCol
 * 데이터 행 수
 * @param sDataType
 * 행의 데이터 유형
 * @return
*/
function generateCompareTRs(iCol, sDataType) {
 return function CompareTRs(oTR1, oTR2) {
 vValue1 = 변환(oTR1.cells[iCol].firstChild.nodeValue, sDataType ); 
 vValue2 = 변환(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
 if (vValue1 < vValue2) {
 return -1;
 } else if (vVal ue1 > vValue2 ) {
                                                                                       ~   문자 유형: 




코드 복사

코드는 다음과 같습니다.

/** * 정렬을 위한 필드 유형 * * @param sValue * 필드 값의 기본값은 ASCII 코드 비교인 문자 유형입니다. * @param sDataType

* 필드 유형은 날짜에만 지원됩니다. 지원되는 형식은 mm/dd/yyyy 또는 mmmm dd,yyyy(January 12,2004)

 * @return
입니다.*/
함수 변환(sValue, sDataType) {
 스위치(sDataType) {
 케이스 "int" :
 return parseInt(sValue);
 케이스 "float" :
 return parseFloat(sValue);
 case "date" :
 return new Date(Date.parse(sValue));
 default :
 return sValue.toString() ;
 }
}

 
3. 주요 기능: 




코드 복사 

코드는 다음과 같습니다:

/** * 테이블 헤더를 기준으로 테이블 열 정렬 * * @param sTableID * 처리할 테이블 ID * @param iCol * 필드 열 ID 예: 0 1 2 3 ...

* @param sDataType
* 이 필드의 데이터 유형은 int, float, date 기본적으로 문자열
으로 처리됩니다.*/
function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody .rows;
var aTRs = new Array;
for ( var i = 0; i < colDataRows.length; i ) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTR. sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for ( var j = 0; j < aTRs.length; j ) {
oFragment .appendChild(aTRs[j]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}

위 코드를 js 파일로 캡슐화하고 html 페이지에서 참조합니다.

테스트 test.html:

코드 복사 코드는 다음과 같습니다.

< ; html xmlns = "http://www.w3.org/1999/xhtml" >
< 제목 >/ 제목 >
< src = "js/sortTable.js" 
< table border = "1" id = "tblSort" >
 < = " 색상: 빨간색; bgcolor: 공백" >
                                                  번째 onclick = " sortTable('tblSort',2,'date');" style = "커서: 포인터" > 
  
  
                                                                                         ;
                                       td > gt;
  3 
                                      
 < ;/ tr > 🎜>                                                           < 2007년 
                                                < 34 
                                                           
 12  ;
 < / tr >
 