>웹 프론트엔드 >JS 튜토리얼 >JS는 테이블 필드 sorting_javascript 기술을 구현합니다.

JS는 테이블 필드 sorting_javascript 기술을 구현합니다.

WBOY
WBOY원래의
2016-05-16 16:59:351188검색

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 >






성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.