Sorting HTML Tables using Javascript

-- JavaScript 2012. 9. 6. 10:06
,
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
테이블의 헤더를 누르면 누른 헤더가 오름/내림차순으로 정렬되는 것으로 실제로 해보니 기능은 잘 되는데 내가 적용했던 Style이 모두 깨진다. 아마 js파일에서 Style을 주는 것 같은데 실무에서는 그대로 쓸 수는 없고 Style을 제거해서 써야 할 것 같다. 링크가 깨질 수도 있어서 첨부파일은 여기에 등록해 둔다.

sortTable.zip

Introduction

This JavaScript code can be used to convert tables in ordinary HTMLinto sortable ones by associating each title column with an onClick event to automaticallysort the data rows.

No additional coding is necessary. All you need to do is give yourtable an ID field, include the sortTable.js file and call initTable in your document's onLoad method.


<HTML>
<HEAD>
<TITLE>Sample Table</TITLE>
</HEAD>
<BODY onLoad='initTable("table0");'>
<SCRIPT SRC="sortTable.js"></SCRIPT>
<TABLE ID="table0" BORDER=1>
    <TBODY>
    <TR><TD ROWSPAN=2>NO</TD><TD COLSPAN=2>IDS</TD><TD ROWSPAN=2>Date</TD></TR>
    <TR><TD>ID</TD><TD>Device ID</TD></TR>
    <TR><TD COLSPAN=4>&nbsp;</TD></TR>
    <TR><TD COLSPAN=3>&nbsp;</TD><TD>&nbsp;</TD></TR>
    <TR><TD>1</TD><TD>k</TD><TD>00030</TD><TD>11/09/01 12:14:00 pm</TD></TR>
    <TR><TD>2</TD><TD>c</TD><TD>00006</TD><TD>11/11/01 12:15:00 pm</TD></TR>
    <TR><TD>3</TD><TD>a</TD><TD>00016</TD><TD>10/16/01 08:14:00 am</TD></TR>
    <TR><TD>4</TD><TD>b</TD><TD>00031</TD><TD>09/05/01 10:05:00 am</TD></TR>
</TABLE>


출처 : http://www.codeproject.com/Articles/1604/Sorting-HTML-Tables-using-Javascript

'-- JavaScript' 카테고리의 다른 글

javascript replace  (0) 2014.05.21
javascript로 number_format 구현  (0) 2013.09.26
이메일주소 쿠키에 저장하고 불러오기  (0) 2012.08.28
Google Maps API &amp; Marker Clusterer  (0) 2012.08.21
Javascript 일반전화, 휴대폰, 이메일 Validation  (0) 2012.08.16
posted by 어린왕자악꿍

티스토리툴바