tr 위치 변경

tr 위치 변경

소스예제
원래 table 내용 목록 No 이름 내용 1 홍길동 홍길동 입니다. 2 김수철 김수철 입니다. 3 이나영 이나영 입니다. 4 곰탱이 곰탱이 입니다. tr 위치 변경 after 목록 No 이름 내용 1 홍길동 홍길동 입니다. 2 김수철 김수철 입니다. 3 이나영 이나영 입니다. 4 곰탱이 곰탱이 입니다. tr 위치 변경 before 목록 No 이름 내용 1 홍길동 홍길동 입니다. 2 김수철 김수철 입니다. 3 이나영 이나영 입니다. 4 곰탱이 곰탱이 입니다.

Tag And Script

원래 table 내용
<table class="ex-table ori-table">
	<caption class="sound_only">목록</caption>
	<thead>
		<tr>
			<th scope="col" nowrap>No</th>
			<th scope="col" nowrap>이름</th>
			<th scope="col" nowrap>내용</th>
		</tr>
	</thead>
	<tbody>
		<tr class="tr_pos idx-1">
			<td class="no" nowrap>1</td>
			<td class="td-w100p">홍길동</td>
			<td>홍길동 입니다.</td>
		</tr>

		<tr class="tr_pos idx-2">
			<td class="no" nowrap>2</td>
			<td class="td-w100p">김수철</td>
			<td>김수철 입니다.</td>
		</tr>

		<tr class="tr_pos idx-3">
			<td class="no" nowrap>3</td>
			<td class="td-w100p">이나영</td>
			<td>이나영 입니다.</td>
		</tr>

		<tr class="tr_pos idx-4">
			<td class="no" nowrap>4</td>
			<td class="td-w100p">곰탱이</td>
			<td>곰탱이 입니다.</td>
		</tr>
	</tbody>
</table>

<br /><br />
tr 위치 변경 after
<table class="ex-table pos-table1">
	<caption class="sound_only">목록</caption>
	<thead>
		<tr>
			<th scope="col" nowrap>No</th>
			<th scope="col" nowrap>이름</th>
			<th scope="col" nowrap>내용</th>
		</tr>
	</thead>
	<tbody>
		<tr class="tr_pos idx-1">
			<td class="no" nowrap>1</td>
			<td class="td-w100p">홍길동</td>
			<td>홍길동 입니다.</td>
		</tr>

		<tr class="tr_pos idx-2">
			<td class="no" nowrap>2</td>
			<td class="td-w100p">김수철</td>
			<td>김수철 입니다.</td>
		</tr>

		<tr class="tr_pos idx-3">
			<td class="no" nowrap>3</td>
			<td class="td-w100p">이나영</td>
			<td>이나영 입니다.</td>
		</tr>

		<tr class="tr_pos idx-4">
			<td class="no" nowrap>4</td>
			<td class="td-w100p">곰탱이</td>
			<td>곰탱이 입니다.</td>
		</tr>
	</tbody>
</table>


<br /><br />
tr 위치 변경 before
<table class="ex-table pos-table2">
	<caption class="sound_only">목록</caption>
	<thead>
		<tr>
			<th scope="col" nowrap>No</th>
			<th scope="col" nowrap>이름</th>
			<th scope="col" nowrap>내용</th>
		</tr>
	</thead>
	<tbody>
		<tr class="tr_pos idx-1">
			<td class="no" nowrap>1</td>
			<td class="td-w100p">홍길동</td>
			<td>홍길동 입니다.</td>
		</tr>

		<tr class="tr_pos idx-2">
			<td class="no" nowrap>2</td>
			<td class="td-w100p">김수철</td>
			<td>김수철 입니다.</td>
		</tr>

		<tr class="tr_pos idx-3">
			<td class="no" nowrap>3</td>
			<td class="td-w100p">이나영</td>
			<td>이나영 입니다.</td>
		</tr>

		<tr class="tr_pos idx-4">
			<td class="no" nowrap>4</td>
			<td class="td-w100p">곰탱이</td>
			<td>곰탱이 입니다.</td>
		</tr>
	</tbody>
</table>

<script>
$(function(e){
	var $table1 = $('table.ex-table.pos-table1');
	var $tr_next1 = $table1.find('tr.tr_pos.idx-3');  // 원위치 tr 요소 : 이나영
	var $tr_target1 = $table1.find('tr.tr_pos.idx-1'); // 이동할 tr 요소 : 홍길동
	$tr_next1.next().after( $tr_target1 ); //  $tr_next tr 의 다음 tr 뒤에 이동할 tr 요소 넣기

	var $table2 = $('table.ex-table.pos-table2');
	var $tr_next2 = $table2.find('tr.tr_pos.idx-1');  // 원위치 tr 요소 : 홍길동
	var $tr_target2 = $table2.find('tr.tr_pos.idx-4'); // 이동할 tr 요소 : 이나영
	$tr_next2.before( $tr_target2 ); //  $tr_next tr 의 다음 tr 뒤에 이동할 tr 요소 넣기
});
</script>