JAVASCRIPT&JQUERY

[JAVASCRIPT] 동적으로 테이블 행 추가/삭제 후 번호 다시 매기기

예나부기 2021. 10. 8.

목차

동적으로 행 추가/삭제하기 완결판!

-추가 버튼을 누를 시 행이 밑에서부터 하나씩 추가된다.

-각 행의 - 버튼을 누를 시 해당 행이 삭제된다.

-초기에는 DB에 가져온 값을 각 행에 보여주고, 사용자가 추가/삭제 할 수 있도록 한다.

-적용 버튼을 누를 시 해당 값이 DB에 저장된다.

1. DB에서 값 불러오기

-행을 추가 할 테이블 세팅한다.

-부트스트랩을 이용할거라면 당연히 추가해줘야 한다.

<div class="form-group">
	<label>동적테이블 행추가하기</label>
	<button type=button class='btn btn-default' id='btn_add' style='float:right; margin-bottom:5px;'>추가버튼</button>	
</div>

<table id='table_ipaddr'> 	
	<tbody>
	<tr>
		<td>
			<div class="label_group">
			<label for="manager_ipaddr_label">행</label>
			</div>
		</td>
		<td>	
			<div class="form_group" style="margin:5px;">
				<input name="manager_ipaddr" class="form-control" class='ipaddr' 
                	style='width:300px; float:left; margin-right:5px'>
				<button type="button" name="btn_delete" class="btn btn-default btn-sm" style="height:30px">
				<span class="glyphicon glyphicon-minus"></span>
				</button>
			</div>
		</td>
	</tr>
</tbody>
</table>

-반복문을 이용해서 초기에는 DB에서 불러온 값을 세팅하도록 한다.

<table id='table_ipaddr'> 	
	<tbody>
    <c:forEach var="setIP" items="${IPaddress}"  varStatus="status">
	<tr>
		<td>
			<div class="label_group">
			<label for="manager_ipaddr_label">행 ${status.count}</label>
			</div>
		</td>
		<td>	
			<div class="form_group" style="margin:5px;">
				<input name="manager_ipaddr" class="form-control" value="${setIP}" class='ipaddr'
              	  style='width:300px; float:left; margin-right:5px'>
				<button type="button" name="btn_delete" class="btn btn-default btn-sm" style="height:30px">
				<span class="glyphicon glyphicon-minus"></span>
				</button>
			</div>
		</td>
	</tr>
    <c:forEach var="setIP" items="${IPaddress}"  varStatus="status">
</tbody>
</table>

-추가/변경된 부분만 보자면,

<c:forEach var="setIP" items="${IPaddress}"  varStatus="status">

<label for="manager_ipaddr_label">행 ${status.count}</label>
<input name="manager_ipaddr" class="form-control" value="${setIP}" class='ipaddr' style='width:300px; float:left; margin-right:5px'>

</c:forEach>

-<c:forEach>구문을 사용하려면 Collection객체인 List/배열을 items에 적어준 뒤 사용할 변수 명을 var에 적어준다.

-input box의 value를 var에 적어둔 변수명을 입력하여 Collection 객체 값을 하나씩 표출하게 한다.

-번호를 붙여야 하므로, varStatus에 지정해둔 "status"를 사용하여 count 해준다. ${status.count}

2. 추가하기 버튼 이벤트 작성

-버튼을 클릭했을 때 추가 할 태그를 템플릿에 세팅한다.

-<tr><td>를 <ttr> <ttd>로 지정한 이유는 초기에는 템플릿이 나오지 않게 하기 위함이다.

-이벤트를 통해 <ttr>은 <tr>로, <ttd>는 <td>로 바꿔주게 되면 행이 추가되는 것처럼 보이게 된다.

<div id='additem_templete' style='display:none'> 
	<ttr>
    	<ttd>
			<div class="label_group">
			<label for="ipaddr_label">행${status.count}</label>
			</div>
		</ttd>
		<ttd>	
			<div class="form_group" style="margin:5px;">
				<input name="manager_ipaddr" class="form-control" value="${setIP}" class='ipaddr' style='width:300px; float:left; margin-right:5px'>
				<button type="button" name="btn_delete" class="btn btn-default btn-sm" style="height:30px">
				<span class="glyphicon glyphicon-minus"></span>
				</button>
			</div>
		</ttd>
	</ttr>
</div>

-추가하기 버튼에 onclick을 달아준다.

<button type=button class='btn btn-default' id='btn_add' style='float:right; margin-bottom:5px;' 
	onclick='javascript:addItem();'>추가버튼</button>

-onclick 함수 작성한다.

function replaceAll(str, ostr, rstr)
{
	if(str == undefined) return str;
	return str.split(ostr).join(rstr);
}

function addItem()
{	
		var append_tr = $("#additem_templete").html();
		append_tr = replaceAll(append_tr, 'ttr', 'tr');
		append_tr = replaceAll(append_tr, 'ttd', 'td');
		$("#table_ipaddr tbody").append(append_tr);
}

3.삭제하기 버튼 이벤트 작성

-삭제 버튼에 삭제 이벤트 onclick을 달아준다. 물론 추가하기 버튼을 통해 추가 될 button에도 동일하게 세팅해놔야 함

<button type="button" name="btn_delete" class="btn btn-default btn-sm" style="height:30px" 
	onclick='javascript:deleteItem(this);>

-삭제 함수 작성한다. this를 통해 넘어온 obj에서 가장 가까운 <tr>객체를 찾아 삭제한다.

function deleteItem(obj)
{
	var tr = $(obj).closest("tr");
	tr.remove();
}

4.항목 추가/ 삭제시마다 행 순서 다시 매기기

-반복문을 통해 DB에서 가져온 값은 1, 2, 3으로 배열의 길이만큼 잘 늘어나지만,

-추가하기 버튼으로 새로운 템플릿을 추가하거나, 중간의 행을 삭제 시에는 행의 순서가 꼬이게 된다.

-이를 방지하게 위해 각 버튼마다 onclick 이벤트를 한개씩 더 작성해놓는다.

-한 개의 태그에 onclick 이벤트를 두 개 달때는, 단순하게 event1(); event2(); 식으로 연결하면 된다.

<button type=button class='btn btn-default' id='btn_add' style='float:right; margin-bottom:5px;' 
	onclick='javascript:addItem(); labelIps();'>추가버튼</button>
    
  <button type="button" name="btn_delete" class="btn btn-default btn-sm" style="height:30px" 
  	onclick='javascript:deleteItem(this); labelIps();'>

-행 번호 다시 매기기 함수를 작성한다.

-테이블 내에 현재 생성된 row 길이만큼 반복문을 돈다(화면에 보이는 input box 개수를 센다)

-각 행의 0번째 행을 바꿔치기 해준다.

function labelIps()
{
	for(var i = 0; i<table_ipaddr.rows.length; i++)
	{
		table_ipaddr.rows[i].cells[0].innerHTML = "<label for=imanager_ipaddr_label'>IP "+(i+1)+"</label>";
	}
}

-전체 HTML코드 정리

<div class="form-group">
	<label>동적테이블 행추가하기</label>
	<button type=button class='btn btn-default' id='btn_add' style='float:right; margin-bottom:5px;' 
	onclick='javascript:addItem(); labelIps();'>추가버튼</button>
</div>

<table id='table_ipaddr'> 	
	<tbody>
    <c:forEach var="setIP" items="${IPaddress}"  varStatus="status">
	<tr>
		<td>
			<div class="label_group">
			<label for="manager_ipaddr_label">행 ${status.count}</label>
			</div>
		</td>
		<td>	
			<div class="form_group" style="margin:5px;">
				<input name="manager_ipaddr" class="form-control" value="${setIP}" class='ipaddr'
              	  style='width:300px; float:left; margin-right:5px'>
				  <button type="button" name="btn_delete" class="btn btn-default btn-sm" style="height:30px" 
  					onclick='javascript:deleteItem(this); labelIps();'>
				<span class="glyphicon glyphicon-minus"></span>
				</button>
			</div>
		</td>
	</tr>
    <c:forEach var="setIP" items="${IPaddress}"  varStatus="status">
</tbody>
</table>

<div id='additem_templete' style='display:none'> 
	<ttr>
    	<ttd>
			<div class="label_group">
			<label for="ipaddr_label">행${status.count}</label>
			</div>
		</ttd>
		<ttd>	
			<div class="form_group" style="margin:5px;">
				<input name="manager_ipaddr" class="form-control" value="${setIP}" class='ipaddr' style='width:300px; float:left; margin-right:5px'>
				  <button type="button" name="btn_delete" class="btn btn-default btn-sm" style="height:30px" 
                  		onclick='javascript:deleteItem(this); labelIps();'>
				<span class="glyphicon glyphicon-minus"></span>
				</button>
			</div>
		</ttd>
	</ttr>
</div>

-입력된 값을 DB에 다시 저장하려면, 입력된 input box가 공백이 아닌 경우로 조건을 작성하여

반복문 돌며 input.value를 새로운 배열에 담아준다.

var len = $('#table_ipaddr >tbody tr').length;
var ipData_filled = new Array();
    
for(var i=0; i<len; i++)
{
	if($("input[name=manager_ipaddr]")[i].value != '') //input box를 생성 후 ip를 담았을 때 처리 
	{
		ipData_filled[num] = $("input[name=manager_ipaddr]")[i].value;
		var ipData = ipData_filled[num];
		num++;
	}
}

도움이
되셨다면
공감 꾹 ~ !
부탁드려요 💖

저작자표시

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[JAVASCRIPT] 참 같은 값 truthy / 거짓 같은 값 falsy (1)	2022.11.29
[JAVASCRIPT] .reduce 사용법 (0)	2021.12.06
자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당) (0)	2021.10.06
자바스크립트 vs 제이쿼리 ( JQuery ) (2)	2021.10.06
[JSTL core] [c:forEach] varStatus를 활용한 변수 (0)	2021.10.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JAVASCRIPT] 동적으로 테이블 행 추가/삭제 후 번호 다시 매기기

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역