My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 21271 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

관리자 페이지등에서 잊을만 하면 사용하는 기능인데..

그간 샘플링이 안되어서 매번 그때 그때 커스터마이징해서 썻던것인데 정리해보았습니다.


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>
<br/>
<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>




관련 게시물 

?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
54 UI 특정 객체가 화면에 보이는지 여부 확인 kay 2015.12.14 4863
53 PlugIn jQuery Formatnumber , 콤마처리 kay 2015.11.03 2078
52 UI Select Box Option 동적 추가 , 삭제 , 복사 kay 2015.09.18 7079
51 etc FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출. kay 2014.10.23 2999
50 etc 기본값 가져오기 get default value kay 2014.10.19 2323
49 UI woothemes FlexSlider - 슬라이더 file kay 2014.09.16 286175
48 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 16605
47 UI Jquery Slider Bar / 슬라이더 바 3종 샘플 file kay 2014.07.28 6712
46 etc 페이지 또는 객체에서 특정 키워드 강조하기 2 kay 2014.06.14 2716
45 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 13219
44 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 105353
43 etc 우클릭 , 셀 선택 , 드래그 방지 스크립트 kay 2014.02.17 7916
42 etc Jquery Load 유무 체크하기 kay 2014.02.12 4287
41 PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 20152
» etc Table에 동적 Tr 추가/삭제 하기 kay 2014.02.09 21271
39 etc 한글/영어 byte 체크해서 자르기 1 kay 2013.11.30 9702
38 UI 동적으로 추가된 객체에 datepicker() 적용하기 kay 2013.11.06 10120
37 etc $.trim(str) trim... kay 2013.10.16 3957
36 A to Z Jquery 로 defaultValue 읽어오기 kay 2013.10.03 3754
35 A to Z readonly , disabled 지정하기 kay 2013.10.01 4109
Board Pagination Prev 1 2 3 Next
/ 3