[jQuery] tr 이동시키기 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

<table>
  <caption>목록</caption>
  <colgroup width="100">
  <colgroup>
  <thead>
    <tr>
      <th scope="col">순서</th>
      <th scope="col">제목</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr_1">
      <td>
        <input type="radio" name="ChangButton" value="1">
        <input type='button' value='↑' onclick="moveRowUpDown('up')" style='width:25px; height:25px;'>
        <input type='button' value='↓' onclick="moveRowUpDown('down')" style='width:25px; height:25px;'>
      </td>
      <td>1 타이틀입니다.</td>
    </tr>
    <tr id="tr_2">
      <td>
        <input type="radio" name="ChangButton" value="2">
        <input type='button' value='↑' onclick="moveRowUpDown('up')" style='width:25px; height:25px;'>
        <input type='button' value='↓' onclick="moveRowUpDown('down')" style='width:25px; height:25px;'>
      </td>
      <td>2 이벤트</td>
    </tr>
    <tr id="tr_3">
      <td>
        <input type="radio" name="ChangButton" value="3">
        <input type='button' value='↑' onclick="moveRowUpDown('up')" style='width:25px; height:25px;'>
        <input type='button' value='↓' onclick="moveRowUpDown('down')" style='width:25px; height:25px;'>
      </td>
      <td>3 금주의 NF소개</td>
    </tr>
    <tr id="tr_4">
      <td>
        <input type="radio" name="ChangButton" value="4">
        <input type='button' value='↑' onclick="moveRowUpDown('up')" style='width:25px; height:25px;'>
        <input type='button' value='↓' onclick="moveRowUpDown('down')" style='width:25px; height:25px;'>
      </td>
      <td>4 야간출근현황 타이틀</td>
    </tr>
  </tbody>
</table>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function moveRowUpDown(option) {
 var num = $('input[name=ChangButton]:checked').val();
 if(num==undefined){
  alert("select radio");
  return;
 }
 var element = $("#tr_"+num);
 if(option=="up"){
  if( element.prev().html() != null  && element.prev().attr("id") != "header"){
   element.insertBefore(element.prev());
  }
 }else{
        if( element.next().html() != null ){
            element.insertAfter(element.next());
        }
 }
}
</script>


관련자료
http://blog.naver.com/ggugers/10151692442