1. 비교 함수 생성기 :
다음과 같이 코드 코드를 복사하십시오.
/**
* 비교 함수 생성기
*
* @Param ICOL
* 데이터 행 수
* @param sdatatype
* 행의 데이터 유형
* @반품
*/
함수 GERATECOMPARETRS (ICOL, SDATATYPE) {
반환 기능 비교 (OTR1, OTR2) {
vvalue1 = convert (otr1.cells [icol] .firstchild.nodevalue, sdatatype);
vvalue2 = convert (otr2.cells [icol] .firstchild.nodevalue, sdatatype);
if (vvalue1 <vvalue2) {
반품 -1;
} else if (vvalue1> vvalue2) {
반환 1;
} 또 다른 {
반환 0;
}
};
}
2. 프로세스 비교 문자 유형 :
다음과 같이 코드 코드를 복사하십시오.
/**
* 정렬 된 필드 유형을 처리하십시오
*
* @param svalue
* 필드 값 기본값은 문자 유형, 즉 ASCII 코드를 비교합니다.
* @param sdatatype
* 필드 유형 만 MM/DD/YYYY 또는 MMMM DD, YYYYY (2004 년 1 월 12 일)의 형식 만 지원합니다.
* @반품
*/
함수 변환 (svalue, sdatatype) {
스위치 (sdatatype) {
사례 "int":
Parseint 리턴 (svalue);
CASE "float":
Parsefloat (svalue)를 반환합니다.
사례 "날짜":
새 날짜를 반환합니다 (date.parse (svalue));
기본:
return svalue.toString ();
}
}
3. 주요 기능 :
다음과 같이 코드 코드를 복사하십시오.
/**
* 테이블 헤더별로 테이블 열을 정렬합니다
*
* @param stableId
* 테이블 ID를 처리 할 <테이블 id = ''>
* @Param ICOL
* 필드 칼럼 ID EG : 0 1 2 3 ...
* @param sdatatype
* 필드 데이터 유형 int, float, 날짜는 기본적으로 처리됩니다.
*/
함수 정렬 테이블 (stableID, ICOL, SDATATYPE) {
var otable = document.getElementById (stableId);
var otbody = otable.tbodies [0];
var coldatarows = otbody.rows;
var ats = 새로운 배열;
for (var i = 0; i <coldatarows.length; i ++) {
Atrs [i] = Coldatarows [i];
}
if (otable.sortcol == icol) {
Atrs.Reverse ();
} 또 다른 {
Atrs.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 페이지에서 참조하십시오.
테스트 테스트 .html :
다음과 같이 코드 코드를 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<title> 테이블 열 정렬 </ title>
<script type = "text/javaScript"src = "js/sorttable.js"> </script>
<body>
<테이블 테두리 = "1"id = "tblsort">
<thead style = "색상 : 빨간색; bgcolor : blank">
<tr>
<th onclick = "sorttable ( 'tblsort', 0);" "Cursor : Pointer"> LastName </ th>
<th onclick = "sorttable ( 'tblsort', 1, 'int');" "Cursor : 포인터"> 번호 </ th>
<th onclick = "sorttable ( 'tblsort', 2, 'date');" "Cursor : 포인터"> 날짜 </ th>
</ tr>
</ thead>
<tbody>
<tr>
<td> a </ td>
<td> 1 </ td>
<td> 5/9/2008 </td>
</ tr>
<tr>
<td> b </ td>
<td> 3 </ td>
<td> 6/9/2008 </td>
</ tr>
<tr>
<td> d </ td>
<td> 6 </ td>
<td> 5/4/2008 </td>
</ tr>
<tr>
<td> e </ td>
<td> -5 </ td>
<td> 5/4/2007 </td>
</ tr>
<tr>
<td> h </ td>
<td> 34 </ td>
<td> 5/8/2008 </td>
</ tr>
<tr>
<td> c </ td>
<td> 12 </ td>
<td> 1/4/2018 </td>
</ tr>
</ tbody>
</ 테이블>
</ body>
</ html>