웹개발
Category
JSP/Servlet
ASP
ASP.NET
PHP
웹디자인
Category
Photoshop
Illustrator
Flash
클라이언트 스크립트
Category
●
Javascript Example
Javascript
CSS3
HTML5
데이타 베이스
Category
MySQL
MSSQL
커뮤니티
Category
공지사항
개발자마당
엔지니어마당
자유마당
플래쉬게임
여행과정보
질문과 답변
Category
웹개발 질문과답변
디자인 질문과답변
자료실
Category
이미지 자료실
개발 자료실
클럽
Category
자동차클럽
하늘소리
공이랑
Javascript Example
Javascript
CSS3
HTML5
Javascript Example
제 목
[TABLE] sort 가능한 테이블
작성자
운영자
등록일
20090206120507
조회수
30,347
sort 가능한 테이블 자바스크립트 소스입니다.
Cow
Sheep
Pig
Dog
Name
Daisy
Fluffy
Oinky
Barky
Height
180cm
121cm
100cm
056cm
Deliciousness
85%
68%
93%
13%
Noise
Moo
Baa
Oink
Woof
<style> .smartTable {border-collapse:collapse; margin:20px auto;} .smartTable th, .smartTable td {border:1px solid #000000; padding:5px;} .smartTable th {background-color:#666666; color:#FFFFFF;} .smartTable .r0 td {} .smartTable .r1 td {background-color:#F6F6F6;} .smartTable .over td {background-color:#FF8800;} .smartTable .sortedAsc {background-color:#66CC66 !important;} .smartTable .sortedDesc {background-color:#CC6666 !important;} </style> <SCRIPT LANGUAGE="JavaScript"> <!-- /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: RoBorg http://javascript.geniusbug.com | http://www.roborg.co.uk */ function smartTableInit() { var tables = document.getElementsByTagName('table'); var len = tables.length; for(var i=0; i<len; i++) { if(tables[i].className.indexOf('smartTable') != -1) smartTable(tables[i]); } } function smartTable(t) { var trs = t.getElementsByTagName('tbody').item(0).getElementsByTagName('tr'); var len = trs.length; for(var i=0; i<len; i++) { trs[i].className = 'r' + (i%2); trs[i].onmouseover = function() { this.className += ' over'; } trs[i].onmouseout = function() { this.className = this.className.replace(/\s+over/, ''); } } var rows = t.rows; var numRows = rows.length; for(var i=0; i<numRows; i++) { var cells = rows[i].cells; var numCells = cells.length; for(var j=0; j<numCells; j++) { if(j && i) break; if(i) cells[j].onclick = new Function('sortByRow(this, ' + i + ');'); else cells[j].onclick = new Function('sortByCol(this, ' + j + ');'); } } } function sortByRow(th, r) { var t = th; while(t.tagName.toLowerCase() != 'table') t = t.parentNode; var dir = 1; if(t.sortedRow) { if(Math.abs(t.sortedRow) == r+1) dir = t.sortedRow == r+1?-1:1; } var vals = new Array(); var val; var len = t.rows[r].cells.length; var cells = t.rows[r].cells; for(var i=1; i<len; i++) { val = cells[i].innerHTML; vals[vals.length] = {'val':val,'i':i}; } vals = vals.sort(sortCell); if(dir == -1) vals = vals.reverse(); var newT = t.cloneNode(true); for(var j=0; j<t.rows.length; j++) { if(j) { var cName = newT.rows[j].cells[0].className.replace(/\s*sorted(Asc|Desc)/, ''); if(j == r) cName += (dir == 1?' sortedAsc':' sortedDesc'); newT.rows[j].cells[0].className = cName; } for(var i=0; i<vals.length; i++) { newT.rows[j].replaceChild(t.rows[j].cells[vals[i].i].cloneNode(true), newT.rows[j].cells[i+1]); } } t.parentNode.replaceChild(newT, t); newT.sortedRow = (r+1) * dir; smartTable(newT); } function sortByCol(th, c) { var t = th; while(t.tagName.toLowerCase() != 'table') t = t.parentNode; var dir = 1; if(t.sortedCol) { if(Math.abs(t.sortedCol) == c+1) dir = t.sortedCol == c+1?-1:1; } var vals = new Array(); var val; for(var i=1; i<t.rows.length; i++) { if(!t.rows[i].cells[c]) val = 0; else val = t.rows[i].cells[c].innerHTML; vals[vals.length] = {'val':val,'i':i}; } vals = vals.sort(sortCell); if(dir == -1) vals = vals.reverse(); var newT = t.cloneNode(true); var len = newT.rows[0].cells.length; var cells = newT.rows[0].cells; for(var i=0; i<len; i++) { var cName = cells[i].className.replace(/\s*sorted(Asc|Desc)/, ''); if(i == c) cName += (dir == 1?' sortedAsc':' sortedDesc'); cells[i].className = cName; } for(var i=0; i<vals.length; i++) { newT.rows[i+1].parentNode.replaceChild(t.rows[vals[i].i].cloneNode(true), newT.rows[i+1]); } t.parentNode.replaceChild(newT, t); newT.sortedCol = (c+1) * dir; smartTable(newT); } function sortCell(a, b) { if(a.val == b.val) return 0; return a.val < b.val?-1:1; } // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { smartTableInit(); }); //--> </SCRIPT> <table class="smartTable"> <tr> <th> </th> <th>Cow</th> <th>Sheep</th> <th>Pig</th> <th>Dog</th> </tr><tr> <td>Name</td> <td>Daisy</td> <td>Fluffy</td> <td>Oinky</td> <td>Barky</td> </tr><tr> <td>Height</td> <td>180cm</td> <td>121cm</td> <td>100cm</td> <td>056cm</td> </tr><tr> <td>Deliciousness</td> <td>85%</td> <td>68%</td> <td>93%</td> <td>13%</td> </tr><tr> <td>Noise</td> <td>Moo</td> <td>Baa</td> <td>Oink</td> <td>Woof</td> </tr> </table>
0
0
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
363
[TEXT] 텍스트 링크에 마우스 오버 시 텍스트 변경하기
[1]
운영자
3 /
1
27085
2018-05-01
362
[JQuery] 휴대폰 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
3 /
1
31206
2018-04-12
361
[JQuery] 사업자 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
1 /
0
29632
2018-04-11
360
[INPUT BOX] 평수를 제곱미터(㎡)로 제곱미터(㎡)를 다시 평수로 계산해줍니다.
[1]
운영자
2 /
0
26823
2016-01-13
359
[BUTTON] 화면 우측하단에 고정되어있는 버튼
운영자
10 /
0
31371
2010-04-21
358
[ETC] Html의 태그를 제거하는 자바스크립트 소스입니다.
운영자
3 /
0
30806
2010-03-08
357
[SELECT BOX] 멀티플 SELECT BOX에서 OPTION VALUE 가져오기
운영자
3 /
0
39938
2010-02-23
356
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가,삭제됩니다.
운영자
3 /
0
35929
2010-02-10
355
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가됩니다.
운영자
0 /
0
28929
2010-02-05
354
[TEXT] 한글자씩 글자 색이 채워집니다.
운영자
2 /
0
28386
2010-01-27
353
[TEXT] 텍스트가 한글자씩 지정된 색상으로 바뀌는 효과
운영자
0 /
0
27095
2010-01-21
352
[TEXTAREA] 버튼을 클릭하면 텍스트에어리어(TEXTAREA) 의 내용이 전체 선택됩니..
운영자
2 /
0
30266
2010-01-05
351
[LAYER] 드롭&다운 판넬
운영자
1 /
1
29540
2009-10-14
350
[POPUP] 움직이는 팝업 레이어
운영자
2 /
0
28872
2009-10-13
349
[RADIO] 레디오 버튼의 선택 유무 체크하기 3
운영자
1 /
1
25103
2009-09-12
348
[INPUT BOX] 입력되는 단어의 첫글자를 대문자로 바꾸기
운영자
0 /
0
27925
2009-06-09
347
[INPUT BOX] 정규식을 이용한 숫자입력 체크 소스입니다.
운영자
1 /
0
36324
2009-03-03
346
[MENU] 가로형 텍스트 레이어 메뉴
운영자
1 /
0
34249
2009-02-20
345
[LAYER] 클릭하면 레이어 인덱스 위치가 바뀝니다.
운영자
0 /
0
25365
2009-02-19
344
[INPUT BOX] 공백(스페이스) 입력시 경고창
운영자
1 /
0
28934
2009-02-18
343
[SELECT MENU] 세이클럽 형식 펼침목록 메뉴
운영자
0 /
0
27430
2009-02-17
342
[LAYER] 레이어 보이기/숨기기
운영자
2 /
0
28189
2009-02-16
341
[TABLE] sort 테이블 II
운영자
0 /
0
28214
2009-02-07
340
[TABLE] sort 가능한 테이블
운영자
0 /
0
30347
2009-02-06
339
[RADIO BOX] 라디오 박스를 선택하면 input 박스가 나타납니다.
운영자
0 /
0
26599
2009-02-04
1
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자