[jquery] html table 리스트 row 동적 변경 up & down 버튼 용-ILE/WINDOWS/IE/JS/HTML2011. 2. 9. 14:06
http://suite.tistory.com 2011.2 fs
<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>
<수행 결과>
'용-ILE > WINDOWS/IE/JS/HTML' 카테고리의 다른 글
| [ IE 8 ] F-12 개발자도구 비활성화 일때 (0) | 2010.03.10 |
|---|---|
| [IE] flash active x 안보일때 | 플래쉬 엑티브 엑스 설치 (0) | 2009.01.12 |
| [비스타] 호스트 파일 위치 vista - hosts (0) | 2008.06.26 |
| 티스토리 플러그인 유입경로 키워드 리퍼러 기능 방식 ? | 방법 ? document.referrer (1) | 2008.05.27 |
| [Javascript] 싸이 월드 일기장 다이어리 백업 v0.2 [ 다이어리,백업,추억상자,싸이백업,일기백업 ] (2) | 2008.05.15 |
