-- JavaScript

Sorting HTML Tables using Javascript

어린왕자악꿍 2012. 9. 6. 10:06
테이블의 헤더를 누르면 누른 헤더가 오름/내림차순으로 정렬되는 것으로 실제로 해보니 기능은 잘 되는데 내가 적용했던 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