포스팅 내 테이블 자동 정렬

검색을 해보면 쉽게 가져다 쓸만한 '테이블을 동적으로 정렬'하는 스크립트나 플러그인이 정말 많습니다.

 

보통은 헤더를 클릭하면 작동하고, 오름순 내림순 반복 처리할 수도 있습니다. (아래 이미지 처럼)

 

 

하지만 이미 널려 있는 걸 저까지 또 만들 필요는 없을 것 같고, 

 

지극히 개인적으로, 그저 가끔이라도 포스팅할 때 내용에 어떤 목록이 필요해서 테이블을 썼는데 다 쓰고보니 이왕이면 정렬해서 보여주면 좋을 것 같을 때가 종종 있길래 (글 쓸 때 이미 머리속에 정렬된 순서대로 쓰는게 아닌 이상...) 그런 포스팅 시에 간단히 사용할 수 있는 스크립트와 적용 방법을 공유하려 합니다.

 

사실 뭐.. 별건 아니고 그냥 해보니 이런 것도 되더라... 정도? (뒷북이라면 뭐... 어쩔수 없.....ㅋ)

주 기능은...

• 글 작성 후 조회 또는 미리보기 시 테이블이 정렬되어 보여집니다.
• 정렬할 열(컬럼)을 지정할 수 있습니다. 
• 한 글에 여러 테이블이 있어도 각각 처리 가능합니다.
• 오름순/내림순 설정이 가능합니다.

 

방법:

우선 테이블을 포함해 글을 모두 작성한 후 에디터에서 html 모드로 변경합니다.

그리고 테이블에 각각 고유의 아이디를 넣어줍니다.

<table 태그에 id="list1" 을 추가한 예시

 

테이블에 아이디 추가를 완료했다면,

같은 화면에서 내용 하단으로 이동해 페이지 끝에 아래 스크립트를 넣어줍니다.

(단순히 사용할 함수를 추가하고 해당 함수를 호출해주는 것 뿐입니다. ^^)

<script>
function sortTable(tblID, col, desc) {
  var table, rows, switching, i, x, y, shouldSwitch;
  col = (col || 0);
  table = document.getElementById(tblID);
  switching = true;
  while (switching) { 
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[col];
      y = rows[i + 1].getElementsByTagName("TD")[col];
      if ((desc)? x.textContent.toLowerCase() < y.textContent.toLowerCase() : x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
sortTable('list1', 0);
</script>

이제 기본모드로 돌아가 미리보기를 확인하고 문제 없으면 글을 저장하면 됩니다.

 

끝~

 

아래는 스크립트 추가 설명입니다.

 

• sortTable('list1', 0);
  • list1 은 위에서 지정한 테이블의 아이디입니다.
  • 0 은 첫번째 열을 기준으로 정렬한다는 의미입니다.
  • 여러 테이블이 있다면... sortTable('list1', 0); sortTable('list2', 0);  이렇게 여러번 각기 다른 아이디를 넣어 실행시키면 됩니다.
  • 0 대신 1을 넣으면 두번째 열을 기준으로 정렬됩니다.
  • sortTable('list1', 0, true); // 전달되는 내용의 끝에 true 값을 추가하면 내림순으로 정렬됩니다. (기본은 오름순)
• for (i = 1; i < .... 여기서 1을 0으로 바꿔주면 테이블의 첫행도 정렬에 포함됩니다.
  (테이블 헤더가 없는 경우에 해당 되겠습니다.)

 

혹시 포스팅에 테이블을 자주 쓴다면 function sortTable( ... ) { ... } 함수를 별도의 js 로 만들거나 스킨의 js 에 추가해 업로드하고 글 작성시엔 <script>sortTable( ... );</script> 만 호출해서 써도 편하겠습니다.

물론, 스크립트를 더 만지면 테이블 헤더가 클릭되게 할 수도 있고 심지어 아이콘도 넣을 수 있고 뭐든 할 수 있겠지만 일단은 자주 쓰는 것도 아니니 사용도 쉽고 기능적으로도 심플하게 주 목적에만 집중하겠습니다.

(혹여 많은 기능이 필요하시면 본 글에 설명된 방법을 따라하되 스크립트만 마음에 드는 다른 스크립트/플러그인으로 대체하시면 되겠죠?)

 

참고로 위에 이용된 주 스크립트는 www.w3schools.com/howto/howto_js_sort_table.asp 의 예제 코드를 기반으로 수정했습니다.

 

보너스:

제가 쓰는 북클럽 스킨의 경우 본문의 테이블 스타일도 스킨의 css 로 지정되어 있어 가끔 정렬이 모두 중앙이라던가... 영 보기 싫게 나올 때가 있네요.

 

그럴땐 위에서 했듯이 글 작성 후 html 모드로 들어가 테이블에 ID를 추가해주고 (예: list1),

아래처럼 직접 style 코드를 넣어주면 됩니다.

<style>
  #list1 td {
    text-align: left;
    padding: 4px 8px;
  }
</style>

끝으로, 혹시 제 설명이 부족해 어려워 하시는 분이 계실까봐...

아래에 제가 최근 테이블을 이용해 작성한 글의 에디터 > html 모드 상태의 소스를 예제로 추가합니다.

<p>살면서 가끔 마주치는대로, 생각나는대로 추가해 볼 예정</p>
<p>(자주 듣게되거나 특이한 것들 위주로)</p>
<p>&nbsp;</p>
<table id="list1" style="border-collapse: collapse; width: 100%; height: 60px;" border="1">
<tbody>
<tr>
<td style="width: 34%; text-align: center;"><b>영어</b></td>
<td style="width: 33%; text-align: center;"><b>뜻</b></td>
<td style="width: 33%; text-align: center;"><b>기타</b></td>
</tr>
<tr style="height: 40px;">
<td style="width: 34%; height: 40px;"><b>Hair of the dog</b><br />(또는 Hair of the dog that bit you)</td>
<td style="width: 33%; height: 40px;">해장술</td>
<td style="width: 33%;">개에 물렸을 때 개의 털을 넣어 만든 약을 먹었던 것에서 유례</td>
</tr>
<tr style="height: 20px;">
<td style="width: 34%; height: 20px;"><b>For what it's worth,</b> ...</td>
<td style="width: 33%; height: 20px;">도움이 될런지 모르겠으나, ...</td>
<td style="width: 33%;">뭔가 알려줄 때 서두에 사용</td>
</tr>
<tr>
<td style="width: 34%;"><b>Would that it were...</b><br />(현대: if only it were...)</td>
<td style="width: 33%;">...이(가) 그랬더라면 / 했더라면</td>
<td style="width: 33%;">매우 오래된 표현 / 중세나 그 이전 시대를 배경으로 한 영화에 종종 나옴</td>
</tr>
<tr>
<td style="width: 34%;"><b>Speak of the devil, ...</b></td>
<td style="width: 33%;">귀신/호랑이도 제 말하면 온다더니</td>
<td style="width: 33%;"><span style="color: #333333;">양반은 못되겠구만...</span></td>
</tr>
<tr>
<td style="width: 34%;">has/have<b> a heart of gold</b></td>
<td style="width: 33%;">마음씨가 곱다 / 착하다</td>
<td style="width: 33%;"><span style="color: #333333;">친절 / 봉사적 / 이타적</span></td>
</tr>
</tbody>
</table>
<p>To be continued...</p>
<style>
  #list1 td {
    text-align: left;
    padding: 4px 8px;
  }
</style>
<script>
function sortTable(tblID, col, desc) {
  var table, rows, switching, i, x, y, shouldSwitch;
  col = (col || 0);
  table = document.getElementById(tblID);
  switching = true;
  while (switching) { 
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[col];
      y = rows[i + 1].getElementsByTagName("TD")[col];
      if ((desc)? x.textContent.toLowerCase() < y.textContent.toLowerCase() : x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
sortTable('list1', 0);
</script>

아, 그리고 이 글은 포스팅 시 유용하기를 바라는 마음에 작성한거라 카테고리가 '티스토리' 로 지정되었지만, 사실 이용된 sortTable 스크립트는 포스팅할 때가 아니라도 어디든 html table 에 id가 있다면 쉽게 옮겨가 쓸 수 있는 자바스크립트 소스일 뿐입니다.