JavaScript를 이용하여 Table Sort처리하기

안녕하세요 도롱군 입니다.

이번 포스팅은 JavaScript를 이용하여 HTML Table을 Sort 할 수 있는 방법에 대해 알아보도록 하겠습니다.

극히 주관적으로 포스팅 되었으며, 최근 사내 인프라 개발하면서 쓰던 스크립트 파트를 조금 정리하여 포스팅 해보자라는

생각으로 포스팅하게 되었습니다.

우선 테이블을 만들기 위해 html 문서를 위와 같이 준비해보도록 합니다.

기본적인 베이스로 저정도만 소스를 작업 해주시면 되며, 한 html 문서 안에서 모든 것을 해결할 예정이니,

head에 내부 스타일을 적용 시켜줍니다. (이는 Table CSS 디자인을 이용하여 테이블 구분을 하기 위함입니다.

상기의 사진은 html 문서의 head 부분만을 캡쳐한 것 입니다.

Table, th, td의 태그를 border style을 줌으로써, 테이블로써의 모양새를 갖추었고,

가독성을 높이기 위하여 th를 늘려주며 가로 폭을 넓혔으며, td의 왼쪽에 공백을 주었습니다.

위의 사진은 body 부분입니다.

thead는 테이블의 head를 의미하며, tbody는 그렇담 table의 body를 의미하는 것이 되겠습니다.

기본적인 sort function이 제 기능을 하기 위하여, 일관성 있게 데이터를 조합하였습니다.

이제 스크립트쪽으로 넘어가보도록 하겠습니다.

이렇게 코드를 table 태그 마감 후 script로 스크립트를 입력해주어야하는데,

저는 function name을 sortTable(n)으로 지정하였고, n은 sort 기능을 넣을 곳에 숫자로 분류를 해주는 기능입니다.

table, rows, switching, o, x, y, shouldSwitch, dir를 선언해주었고

테이블은 inventory로 id 선언한 테이블 값을 불러오기로 하였습니다. (태그 네임으로도 불러올 수 있습니다.)

이상태로 실행을 할 경우, 클릭시 소트가 안됩니다.

onclick으로 스크립트를 테이블에 기입 해주셔야 합니다.

기입하는 방법은 tag에 onclick="변수 명"을 기입해주시면 됩니다.

저희는 (n)으로 분류할 수 있기에 sortTable(n)으로 코딩해주시면 되겠습니다.

이렇게 작성하고 나면 되는데, 무언가 허전한 감이 있을 수 있습니다.

우선 실행을 하면 아래와 같이 표현됩니다.

너무 밋밋하게 흘러가고, 간혹 Sort 적용이 되어 있는지 모르는 분이 계십니다.

이런 경우엔 인라인 스타일로 커서 스타일을 주면 해결 가능합니다.

이렇게 인라인 스타일로 cursor: pointer; 를 넣어주게 될 경우 아래처럼 thead 부분에 마우스 커서를 올릴 경우

마우스 포인터가 해당 포인터로 바뀌게 됩니다.

추가적으로 궁금하거나 적용이 안되는 경우

댓글 남겨주시면 피드백 드리겠습니다 :()

감사합니다.