[Jquery] 테이블 행(tr) 이동

리스트형 페이지 특히 관리자 페이지의 경우 순서 변경 기능이 자주 요구되서,
이참에 한번...

특이 사항으로는 class 명을 "move up", "move dn" 이렇게 두개로 사용해서
"move" class 클릭 이벤트로 인식, 위(up) / 아래(dn)을 분기, 소스를 최대한 짧게 구현 해보았습니다.

<table>
 <tr>
  <td>첫번째 행</td>
  <td>
   <button type="button" value="위로" class="move up">
   <button type="button" value="아래로" class="move dn">
  </td>
 </tr>
 <tr>
  <td>두번째 행</td>
  <td>
   <button type="button" value="위로" class="move up">
   <button type="button" value="아래로" class="move dn">
  </td>
 </tr>
 <tr>
  <td>세번째 행</td>
  <td>
   <button type="button" value="위로" class="move up">
   <button type="button" value="아래로" class="move dn">
  </td>
 </tr>
</table>
<script>
$(document).on('click', '.move', function() {

 var mode = ($(this).attr('class') == "move up" ? "up" : "dn");
 var element = $(this).closest('tr');

 if (mode == "up" && element.prev().html() != null) {
  // 위로 이동
  element.insertBefore(element.prev());

 } else if (mode == "dn" && element.next().html() != null){
  // 아래로 이동
  element.insertAfter(element.next());

 }

});
<script>