메뉴 건너뛰기

tnt_lang

html/script 테이블 소트

박상현 2005.08.18 18:45 조회 수 : 1655 추천:37

<html>
    <head>
<title>Table Sort Example</title>
        <script type="text/javascript">
        
            function convert(sValue, sDataType) {
                switch(sDataType) {
                    case "int":
                        return parseInt(sValue);
                    case "float":
                        return parseFloat(sValue);
                    case "date":
                        return new Date(Date.parse(sValue));
                    default:
                        return sValue.toString();
                
                }
            }
        
            function generateCompareTRs(iCol, sDataType) {
        
                return  function compareTRs(oTR1, oTR2) {
                            var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                            var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
        
                            if (vValue1 < vValue2) {
                                return -1;
                            } else if (vValue1 > vValue2) {
                                return 1;
                            } else {
                                return 0;
                            }
                        };
            }
          
            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 {
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }
        
                var oFragment = document.createDocumentFragment();
                for (var i=0; i < aTRs.length; i++) {
                    oFragment.appendChild(aTRs[i]);
                }
      
                oTBody.appendChild(oFragment);
                oTable.sortCol = iCol;
            }

        </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', 0)"
                        style="cursor:pointer">Last Name</th>
                    <th onclick="sortTable('tblSort', 1)"
                        style="cursor:pointer">First Name</th>
                    <th onclick="sortTable('tblSort', 2, 'date')"
                        style="cursor:pointer">Birthday</th>
                    <th onclick="sortTable('tblSort', 3, 'int')"
                        style="cursor:pointer">Siblings</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                    <td>7/12/1978</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                    <td>Betty</td>
                    <td>10/15/1977</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                    <td>Nathan</td>
                    <td>2/25/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Williams</td>
                    <td>James</td>
                    <td>7/8/1980</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                    <td>Michael</td>
                    <td>7/22/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Walker</td>
                    <td>Matthew</td>
                    <td>1/14/2000</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>        
    </body>
</html>

번호 제목 글쓴이 날짜 조회 수
58 [제로보드]게시물 소스보기 기능추가 운영자 2003.10.09 3213
57 Visual c++로 ActiveX작성하고 웹페이지에 붙이는 방법설명.. 운영자 2003.10.09 2183
56 간단한 메일보내기 운영자 2003.10.09 1853
55 WEB-FTP 운영자 2003.10.09 2011
54 ty*bizware for java sample file 운영자 2003.04.02 2332
53 자바교재소스 운영자 2003.01.29 2317
52 PDFBox 0.6.1 - Java PDF Library 운영자 2003.04.15 4294
51 정보를 다시 보내지 않으면....<익스플로러 MsgBox방지법>- mothod:post 하늘과컴 2007.10.13 3690
50 [struts]폼빈에 배열을 사용하기 박상현 2006.05.20 2376
49 윈도업데이트 이후 실행되지 않았던 activeX 컨트롤 실행 박상현 2005.11.16 2134
48 클래스 패스와 관련한 문제는 요 jsp 하나로.. 해결 끝이네요.. 하늘과컴 2005.11.15 2317
47 XMLHTTP설명 박상현 2005.11.11 2189
46 능동적으로 select box의 option값 설정및 삭제 박상현 2005.10.24 4147
» 테이블 소트 박상현 2005.08.18 1655
44 자바스크립트로 한글 , 초성 중성 종성 분리 (음소분리) 박상현 2005.05.19 4480
43 select box관련 함수들(입력, 수정, 삭제, 정렬등) 박상현 2004.09.23 3216
42 select box의 option값 정렬 함수 박상현 2004.09.23 5495
41 셀렉트박스에서 키보드 초성에 해당하는 값 자동select 박상현 2004.08.01 2283
40 weblogic8.1과 eclipse3.0RC2, LombozRC1용을 이용한 EJB개발 박상현 2004.06.22 2588
39 weblogic5.1과 ant를 이용하여 EJB개발(내부 개발용) 박상현 2004.06.22 5337
위로