jQuery Table에 동적 Tr 추가/삭제 하기
Open API/Jquery2016. 11. 15. 17:23
반응형
관리자 페이지등에서 잊을만 하면 사용하는 기능인데..
그간 샘플링이 안되어서 매번 그때 그때 커스터마이징해서 썻던것인데 정리해보았습니다.
Test Url : http://www.uhoon.co.kr/test/2541.html
<!DOCTYPE html>
<html>
<head>
<title>테이블에 동적으로 TR 추가 /삭제 하기</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnAddRow").on("click",function() {
// clone
$.trClone = $("#memberTable tr:last").clone().html();
$.newTr = $("<tr>"+$.trClone+"</tr>");
// append
$("#memberTable").append($.newTr);
// delete Button 추가
$.btnDelete = $(document.createElement("input"));
$.btnDelete.attr({
name : "btnRemove",
type : "button" ,
value : "삭제"
});
$("#memberTable tr:last td:last").html("");
$("#memberTable tr:last td:last").append($.btnDelete);
// 버튼에 클릭 이벤트 추가
$("#memberTable tr>td:last>input[type='button']").on('click', function(){
$(this).parent().parent().remove();
});
});
// 초기화
$("#tableReset").on("click",function(){
$("#frmTest").each(function(){ this.reset(); });
$("input[name='btnRemove']").each(function () {
$(this).trigger('click');
});
});
});
</script>
</head>
<body >
<div style="width:500px;text-align:right;">
<input type="button" value="행추가" id="btnAddRow" />
<input type="button" value="reset" id="tableReset"/>
</div>
<form method="post" id="frmTest">
<table id="memberTable" border="1" style="width:500px;">
<tr>
<td><input type="text" id="fullName" /></td>
<td><input type="text" id="age" /></td>
<td><input type="text" id="addr" /></td>
<td style="width:50px;"></td>
</tr>
</table>
</form>
</body>
</html>
댓글()
