JQUERY 두 테이블 간에 <tr> 주고 받기

JQUERY 두 테이블 간에 <tr> 주고 받기

테이블이 두개있을 때, 각 테이블끼리 tr을 주고 받는 기능을 jquery로 구현해보았다.

 

 

---

 

 

tr 위치 이동은 1번 테이블의 tr을 2번 테이블로 이동시킨다는 의미로 사용하였다.

jquery tr 이동 / 두 테이블 간 tr 태그 주고 받기

 

 

* 예시

아래와 같이 구조가 동일한 테이블이 있다고 가정한다.

<div class="flex">
  <table id="table_A">
    <thead>
      <th><input type="checkbox" id="allChk2" onClick="moveItem(this,'all')"></th>
      <th>번호</th>
      <th>이름</th>
    </thead>
    <tbody>
      <tr id="item_1">
        <td>
          <input type="checkbox" name="id" onClick="moveItem(this,1)">
        </td>
        <td>1</td>
        <td>A</td>
      </tr>
      <tr id="item_2">
        <td>
          <input type="checkbox" name="id" onClick="moveItem(this,2)">
        </td>
        <td>2</td>
        <td>B</td>
      </tr>
    </tbody>
  </table>

  <table id="table_B">
    <thead>
      <th><input type="checkbox" id="allChk2" onClick="moveItem(this,'all')"></th>
      <th>번호</th>
      <th>이름</th>
    </thead>
    <tbody>
      <tr id="item_3">
        <td>
          <input type="checkbox" name="id" onClick="moveItem(this,3)">
        </td>
        <td>3</td>
        <td>C</td>
      </tr>
      <tr id="item_4">
        <td>
          <input type="checkbox" name="id" onClick="moveItem(this,4)">
        </td>
        <td>4</td>
        <td>D</td>
      </tr>
    </tbody>
  </table>
</div>

 

 

jquery는 아래와 같이 구성된다.

function moveItem(e, val) {
	var tbl1 = $(e).parents('table').attr('id'); 
	var tbl2 = '';

	if (tbl1 == 'table_A')
		tbl2 = 'table_B';
	else
		tbl2 = 'table_A';

	$('input[type="checkbox"]').prop('checked',false);

	if (val == "all") 
	{
		$('#'+tbl2+' tbody').append($('#'+tbl1+' tbody tr'));
	}
	else
	{
		$('#'+tbl2+' tbody').append($('#item_'+val));
	}
}

 

 

실행결과는 다음과 같다.

 

 

 

설명을 추가해보자면,

체크박스를 선택한 테이블이 기준 테이블(tbl1)이 되며, 기준 테이블의 <tr>을 새로 이동할 테이블(tbl2)로 append한다.

전체 선택과 특정 로우 선택으로 나뉜다.

 

 

function moveItem(e, val) {
	var tbl1 = $(e).parents('table').attr('id'); //기준 테이블
	var tbl2 = ''; //이동할 테이블

	//기준 테이블에 따라 이동할 테이블을 설정한다.
	if (tbl1 == 'table_A')
		tbl2 = 'table_B';
	else
		tbl2 = 'table_A';

	$('input[type="checkbox"]').prop('checked',false); //모든 체크박스 해제

	//tr 이동
	if (val == "all") //전체 선택인 경우
	{
		//기준 테이블의 모든 tr을 이동할 테이블의 tbody에 붙인다.
		$('#'+tbl2+' tbody').append($('#'+tbl1+' tbody tr'));
	}
	else
	{
		//선택한 tr만 이동할 테이블의 tbody에 붙인다.
		$('#'+tbl2+' tbody').append($('#item_'+val));
	}
}

 

sorting 기능을 같이 사용하면 좋을 듯 하다.

유의할 점은 페이징이 있거나 두 테이블의 구조가 다른 경우에는 jquery를 별도로 보강해야한다는 것이다.

 

끝.

 

 

 

반응형