jQuery 한줄 팁

Table 의 TR 순서 변경하기

전체 폼요소 요소찾기 코드팁 움직임
등록일 :

TR 순서를 바꾸자 !!

테이블에서 TR 요소를 다른 TR 요소의 위 아래로 이동하는 기능이 필요한 경우가 있습니다.
DIV 로 만들고 드래그하여 순서를 바꾸는게 더 좋고 있어보이는(??) 방법이지만
테이블을 써야하는 경우가 있습니다. 그리고 테이블에 적용 하려면 좀 귀찮죠. -.-?

최대한 간단한 코딩으로 그걸 해보겠습니다.

※ 이 방법도 여러가지가 있습니다. 그 중 하나입니다~

올리기, 내리기 버튼을 눌러보세요

CSS

.table1 {
	border:6px solid silver;
	border-radius:5px;
}
.table1 td {
	border:1px solid gray;
	padding:7px;
	box-shadow:0 0 5px silver inset;
}

HTML

<table class="table1" cellspacing="3" align="center">
	<tr>
		<td><img src="http://superkts.com/img/css/dog021.gif" /><img src="http://superkts.com/img/css/dog021.gif" /><img src="http://superkts.com/img/css/dog021.gif" /></td>
		<td>
			<button type="button" onclick="moveUp(this)">올리기</button>
			<button type="button" onclick="moveDown(this)">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/dog060.gif" /><img src="http://superkts.com/img/css/dog060.gif" /></td>
		<td>
			<button type="button" onclick="moveUp(this)">올리기</button>
			<button type="button" onclick="moveDown(this)">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/dog061.gif" /></td>
		<td>
			<button type="button" onclick="moveUp(this)">올리기</button>
			<button type="button" onclick="moveDown(this)">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/bird20.gif" /></td>
		<td>
			<button type="button" onclick="moveUp(this)">올리기</button>
			<button type="button" onclick="moveDown(this)">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/bird21.gif" /><img src="http://superkts.com/img/css/bird21.gif" /></td>
		<td>
			<button type="button" onclick="moveUp(this)">올리기</button>
			<button type="button" onclick="moveDown(this)">내리기</button>
		</td>
	</tr>
</table>

자바스크립트

function moveUp(el){
	var $tr = $(el).parent().parent(); // 클릭한 버튼이 속한 tr 요소
	$tr.prev().before($tr); // 현재 tr 의 이전 tr 앞에 선택한 tr 넣기
}

function moveDown(el){
	var $tr = $(el).parent().parent(); // 클릭한 버튼이 속한 tr 요소
	$tr.next().after($tr); // 현재 tr 의 다음 tr 뒤에 선택한 tr 넣기
}

// 이렇게 하면 더이상 올리거나 내릴 수 없더라도 그 상황을 체크 하지 않아도 됩니다.
// 올리거나 내릴 대상이 없어서 에러가 나는것을 따로 감안하지 않아도 된다는 것이죠 *_*

이번에 필요로 해서 만들어 본것을 예제화 시켰습니다.
예전에는 tr 의 html 을 읽어와서 사용했는데 .. 그건 좀.. ㄷㄷ
하지만 이렇게 하면 굉장히 깔끔해 집니다. 코드도 그렇구요.

※ 만들며 생각하기에 TR 이 복사될 줄 알았는데.. 그냥 옮겨지네요. ㅎ

실행 가능한 소스

실험 : 이동시 동적 생성된 이벤트도 따라갈까?

위 예제 에서는 클릭이벤트가 onclick="함수명" 처럼 지정되어 있었죠.
그럼 만약 동적으로 생성한 이벤트도 TR 이동시 따라갈까요?

해보겠습니다.

CSS

.table1 {
	border:6px solid silver;
	border-radius:5px;
}
.table1 td {
	border:1px solid gray;
	padding:7px;
	box-shadow:0 0 5px silver inset;
}

HTML

<table class="table1" cellspacing="3" align="center">
	<tr>
		<td><img src="http://superkts.com/img/css/dog021.gif" /><img src="http://superkts.com/img/css/dog021.gif" /><img src="http://superkts.com/img/css/dog021.gif" /></td>
		<td>
			<button type="button">올리기</button>
			<button type="button">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/dog060.gif" /><img src="http://superkts.com/img/css/dog060.gif" /></td>
		<td>
			<button type="button">올리기</button>
			<button type="button">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/dog061.gif" /></td>
		<td>
			<button type="button">올리기</button>
			<button type="button">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/bird20.gif" /></td>
		<td>
			<button type="button">올리기</button>
			<button type="button">내리기</button>
		</td>
	</tr>
	<tr>
		<td><img src="http://superkts.com/img/css/bird21.gif" /><img src="http://superkts.com/img/css/bird21.gif" /></td>
		<td>
			<button type="button">올리기</button>
			<button type="button">내리기</button>
		</td>
	</tr>
</table>

자바스크립트

// 홀수번째 버튼에 클릭시 moveUp 함수 호출 하기 (올리기 버튼에 클릭이벤트 생성)
$('.table1 button:even').bind('click', function(){ moveUp(this) });

// 짝수번째 버튼에 클릭시 moveUp 함수 호출 하기 (내리기 버튼에 클릭이벤트 생성)
$('.table1 button:odd').bind('click', function(){ moveDown(this) });

function moveUp(el){
	var $tr = $(el).parent().parent(); // 클릭한 버튼이 속한 tr 요소
	$tr.prev().before($tr); // 현재 tr 의 이전 tr 앞에 선택한 tr 넣기
}

function moveDown(el){
	var $tr = $(el).parent().parent(); // 클릭한 버튼이 속한 tr 요소
	$tr.next().after($tr); // 현재 tr 의 다음 tr 뒤에 선택한 tr 넣기
}

잘 되는 군요. ㅎㅎㅎ
이제 마음이 편안해 졌습니다. 오늘은 이걸로 !!

※ 그대로 이동한다고 보면 되겠습니다.

실행 가능한 소스

소스 개선 !!

jQuery closest 메서드를 사용해서 자바스크립트 함수를 개선하였습니다.

closest 메서드는 parent 를 여러개 써야하는 경우 사용하면 좋습니다.
parent().parent().parent().parent() 같은 것이 closest 하나면 됩니다.
혹시 모르셨나요?

자바스크립트

// 홀수번째 버튼에 클릭시 moveUp 함수 호출 하기 (올리기 버튼에 클릭이벤트 생성)
$('.table1 button:even').bind('click', function(){ moveUp(this) });

// 짝수번째 버튼에 클릭시 moveUp 함수 호출 하기 (내리기 버튼에 클릭이벤트 생성)
$('.table1 button:odd').bind('click', function(){ moveDown(this) });


// closest 메서드를 이용하여 소스 단순화 !!
// closest 메서드는 지정한 셀렉터에 해당하는 가장 가까운 부모를 찾음
// .parent().parent() 처럼 여러개 많이 나열하지 말기~

function moveUp(el){
	var $tr = $(el).closest('tr'); // 클릭한 버튼이 속한 tr 요소
	$tr.prev().before($tr); // 선택한 tr 의 이전 tr 앞에 선택한 tr 넣기
}

function moveDown(el){
	var $tr = $(el).closest('tr'); // 클릭한 버튼이 속한 tr 요소
	$tr.next().after($tr); // 선택한 tr 의 다음 tr 뒤에 선택한 tr 넣기
}

코드 몇줄로 TR 순서바꾸기가 완성되었습니다.
제이쿼리의 위대함이 느껴집니다 !!
제이쿼리 없던 시절 이런걸 직접 구현했던 분들께 경의를 표합니다.

실행 가능한 소스

맨위 맨아래 기능 추가

클릭한 항목을 맨위 또는 맨아래로 이동하는 기능을 추가해 보았습니다.

CSS

.table1 {
	border:6px solid silver;
	border-radius:5px;
}
.table1 td {
	border-bottom:1px solid gray;
	padding:7px;
}
.table1 tr:last-child td { /* 마지막 td 는 border-bottom 없애기 */
	border-bottom:0;
}

HTML

<table class="table1" cellspacing="0" align="center">
	<tr>
		<td>
			<img src="http://superkts.com/img/icon/food/fff22.gif" />
		</td>
		<td>
			<button type="button" onclick="moveTop(this)">맨위</button>
			<button type="button" onclick="moveUp(this)">위로</button>
			<button type="button" onclick="moveDown(this)">아래로</button>
			<button type="button" onclick="moveBottom(this)">맨아래</button>
		</td>
	</tr>
	<tr>
		<td>
			<img src="http://superkts.com/img/icon/food/fff28.gif" />
			<img src="http://superkts.com/img/icon/food/fff28.gif" />
		</td>
		<td>
			<button type="button" onclick="moveTop(this)">맨위</button>
			<button type="button" onclick="moveUp(this)">위로</button>
			<button type="button" onclick="moveDown(this)">아래로</button>
			<button type="button" onclick="moveBottom(this)">맨아래</button>
		</td>
	</tr>
	<tr>
		<td>
			<img src="http://superkts.com/img/icon/food/fo028.gif" />
			<img src="http://superkts.com/img/icon/food/fo028.gif" />
			<img src="http://superkts.com/img/icon/food/fo028.gif" />
		</td>
		<td>
			<button type="button" onclick="moveTop(this)">맨위</button>
			<button type="button" onclick="moveUp(this)">위로</button>
			<button type="button" onclick="moveDown(this)">아래로</button>
			<button type="button" onclick="moveBottom(this)">맨아래</button>
		</td>
	</tr>
	<tr>
		<td>
			<img src="http://superkts.com/img/icon/food/fff27.gif" />
			<img src="http://superkts.com/img/icon/food/fff27.gif" />
			<img src="http://superkts.com/img/icon/food/fff27.gif" />
			<img src="http://superkts.com/img/icon/food/fff27.gif" />
		</td>
		<td>
			<button type="button" onclick="moveTop(this)">맨위</button>
			<button type="button" onclick="moveUp(this)">위로</button>
			<button type="button" onclick="moveDown(this)">아래로</button>
			<button type="button" onclick="moveBottom(this)">맨아래</button>
		</td>
	</tr>
	<tr>
		<td>
			<img src="http://superkts.com/img/icon/food/fo035.gif" />
			<img src="http://superkts.com/img/icon/food/fo035.gif" />
			<img src="http://superkts.com/img/icon/food/fo035.gif" />
		</td>
		<td>
			<button type="button" onclick="moveTop(this)">맨위</button>
			<button type="button" onclick="moveUp(this)">위로</button>
			<button type="button" onclick="moveDown(this)">아래로</button>
			<button type="button" onclick="moveBottom(this)">맨아래</button>
		</td>
	</tr>
</table>

자바스크립트

function moveUp(el){
	var $tr = $(el).closest('tr');
	$tr.prev().before($tr);
}

function moveTop(el){
	var $tr = $(el).closest('tr');
	$tr.closest('table').find('tr:first').before($tr);
	// $tr.closest('table') - 클릭한 요소의 부모 table 요소
	// .find('tr:first').before($tr) - 첫번째 tr 찾아서 그 앞에 클릭한 tr 요소 넣기(이동)
}

function moveDown(el){
	var $tr = $(el).closest('tr');
	$tr.next().after($tr);
}

function moveBottom(el){
	var $tr = $(el).closest('tr');
	$tr.closest('table').find('tr:last').after($tr);
}

실행 가능한 소스

다른 방법도 찾아보기

다른 방법도 많이 있습니다.
직접 검색해서 어떤 방법이 있는지 한번 보시는것도 좋을듯 합니다.

검색 고고싱 !
방문해 주셔서 감사드립니다 !!