[jQuery] 동적으로 테이블에 행 추가하기/삭제하기

오늘 만들어 볼 것! 동적으로 조절하는 테이블

 

예시) 

+ 버튼을 누르면 마지막 행이 추가된다.

+버튼 클릭

- 버튼을 누르면 해당 행이 삭제된다.

- 버튼 클릭

해당 행이 삭제됨

 

프로세스는 아주 단순하다.

 

1)먼저, HTML에 원하는 테이블을 세팅한다.

나의 경우는 검색창이 큰 테이블 내부의 <tr>이여서, 클릭할 때마다 <td> 내부의 <div>가 추가/삭제되게 만들었다. 

table자체여도 큰 차이가 없을 듯 

 

<tr class=filter_row>
	<td>"검색"</td>
      <td id = "searchData">
        <div class=input-group>
          <select id="search_type" class="form-control input-xs" name="selSearchKey" style="width:150px;height:30px;margin-right:2px">
            <option value="process">"프로세스 검색"</option>
            <option value="name">"외부이름 검색"</option>
            <option value="internal">"내부이름 검색"</option>
          </select>
          <input type="text" id="search_value" class="form-control" style="height:30px; width:300px; margin-right:2px">
          <button type="button" id="addSearchKey" class="btn btn-default btn-sm" onclick="addSearchKey()"> 
          	<span class="glyphicon glyphicon-plus"></span>
          </button>
          <button type="button" id="delSearchKey" class="btn btn-default btn-sm">
          	<span class="glyphicon glyphicon-minus"></span>
          </button>
        </div>
	</td>
</tr>

 

2) 버튼에 달아준 onclick 이벤트를 처리한다.

 

2-1)먼저, +버튼 이벤트 addSearchKey() 추가

function addSearchKey()
{

	var rowItem = "<div class=input-group>";
		rowItem += "<select id='search_type' class='form-control input-xs' name='selSearchKey' style='width:150px;height:30px;margin-right:2px'>";
		rowItem += "<option value='process'>"프로세스 검색"</option>";
		rowItem += "<option value='name'>"외부이름 검색"</option>";
		rowItem += "<option value='internal'>"내부이름 검색"</option>";
		rowItem += "</select>";
		rowItem += "<input type='text' id='search_value' class='form-control' style='height:30px; width:300px; margin-right:2px'>";
		rowItem += "<button type='button' id='addSearchKey' class='btn btn-default btn-sm' onclick='addSearchKey()'> <span class='glyphicon glyphicon-plus'></span></button>";
		rowItem += "<button type='button' id='delSearchKey' class='btn btn-default btn-sm' onclick='delSearchKey(this)'> <span class='glyphicon glyphicon-minus'></span></button>";
		rowItem += "</div>";

	$('#searchData').append(rowItem); // 동적으로 row를 추가한다.

}

- 먼저, 자신이 추가 하고 싶은 html 요소들을 변수에 담아준다.

그 후, .append를 통해 해당 요소들을 추가하면 끝!

 

2-2) -버튼 이벤트 추가

 

첫 번째 검색 창은 삭제되지 않도록 만들 것이기 때문에, 1번의 html 태그에서는 delSearchKey() function을 달아주지 않았다. addSearchKey()이벤트로 추가되는 행에만 delSearchKey()를 달아주기 위해 2번의 rowItem에 

아래 처럼 onclick이벤트를 작업해 놓았었다.

rowItem += "<button type='button' id='delSearchKey' class='btn btn-default btn-sm' onclick='delSearchKey(this)'> 
<span class='glyphicon glyphicon-minus'></span>
</button>";

그럼 이 delSearchKey() 이벤트를 작성해주기만 하면 끝!

function delSearchKey(obj)
{
	//동적으로 생성된 삭제 버튼에서 div 요소를 제거한다.
	var div = $(obj).parent();
	div.remove();
}

obj 형태인 this 를 받아 부모 요소를 찾고, (나와 같은 경우에는 div가 된다. 테이블 자체에 위와 같은 작업을 했을 때는 클릭할 때마다 tr이 변하는 형태일 것이므로, tr이 될 것이다.) 해당 요소를 .remove() 해 준다.