티스토리 뷰

<table><tr> <td> 리스트 화면을 동적 상 하 좌 우 변경하고 싶을때~~ 역시 검색 해도 잘안나와서 정리해봄
http://jquery.com/  Cross-browser 대단함~~~ 현재 제공해주는 최신 버전은 version 1.5임
 
<html>
<title>Jquery로 리스트 동적 변경 http://suite.tistory.com</title>
<head>
<script type="text/javascript" src="jquery-1.5.min.js"></script> 
</head>
<body>
<form method="get">
<table border=1>
  <tr id=MARK1>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id1">
    </td>
    <td>제목1</td>
    <td>내용1</td> 
    <td>
      <input type="button" name="up1" value="up" onclick="moveUpItem('MARK1')">
      <input type="button" name="down1" value="down"  onclick="moveDownItem('MARK1')">
    </td>
  </tr>
  <tr id=MARK2>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id2">
    </td>
    <td>제목2</td>
    <td>내용2</td> 
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK2')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK2')">
    </td>
  </tr>
  <tr id=MARK3>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id3">
    </td>
    <td>제목3</td>
    <td>내용3</td> 
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK3')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK3')">
    </td>
  </tr>
  <tr id=MARK4>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id4">
    </td>
    <td>제목4</td>
    <td>내용4</td> 
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK4')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK4')">
    </td>
  </tr>
  <tr id=MARK5>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id5">
    </td>
    <td>제목5</td>
    <td>내용5</td> 
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK5')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK5')">
    </td>
  </tr>   
</table>
<script type="text/javascript">
       
function moveUpItem(currentMark) {    
 
  var idStr='#' + currentMark;
  var prevHtml=$(idStr).prev().html();

  if( prevHtml == null){
    alert("최상위 리스트입니다!");
    return;
  }
  var prevcurrentMark=$(idStr).prev().attr("id");
 
  var currcurrentMark=$(idStr).attr("id");
  var currHtml=$(idStr).html();
 
  //값 변경
  $(idStr).html(prevHtml);
  $(idStr).prev().html(currHtml);
 
  //id 값도 변경
  $(idStr).prev().attr("id","TEMP_TR");
  $(idStr).attr("id",prevcurrentMark);
  $("#TEMP_TR").attr("id",currcurrentMark);
 
}

function moveDownItem(currentMark) {    
 
  var idStr='#' + currentMark;
  var nextHtml=$(idStr).next().html();

  if( nextHtml == null){
    alert("최하위 리스트입니다!");
    return;
  }
  var nextcurrentMark=$(idStr).next().attr("id");
  var currcurrentMark=$(idStr).attr("id");
  var currHtml=$(idStr).html();
  $(idStr).next().html(currHtml);
 // $(idStr).next().attr("id",currcurrentMark);
 
  //값 변경
  $(idStr).html(nextHtml);
 
  //id 값도 변경
  $(idStr).next().attr("id","TEMP_TR");
  $(idStr).attr("id",nextcurrentMark);
  $("#TEMP_TR").attr("id",currcurrentMark);
 
}

</script>
<input type=submit name="test">  
</form>
</table>
</body>
</html> 


 

댓글
댓글쓰기 폼