jQuery(제이쿼리) 강좌와 예제모음

요소 동적추가하기와 복사하기에 대한 이야기

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
등록일 :

파일 업로드 기능을 만들다가 문득

업무상 ..
첨부 파일을 + 버튼을 눌러서 여러개 추가하는 것을 만들었습니다.
자주 하는거라 귀찮기도 하지만 ... 그래도 해야 하기에 합니다.

그리고 문득 깨달음이 있어 글을 작성하게 되었습니다. ㅎㅎ

+ 버튼을 눌러서 추가하는 방법 몇가지

- 미리 숨겨둔 파일선택 영역을 보여줌 처리 한다.
- 자바 스크립트로 태그를 쓰도록 해서 추가 시킨다.
- 태그를 쓰는 방식이 아닌 방법으로 동적 생성한다.

크게 이 정도 있을것입니다.
이런 작업이 은근 손도 많이 가고 귀찮습니다.

시작해 보겠습니다.

기본 구성입니다.
추가 버튼을 누르면 파일 선택을 더 할 수 있는 영역이 추가됩니다.
첨부파일

HTML

<table cellpadding="5" cellspacing="0" border="1">
	<tr name="tr_attach_file">
		<th>첨부파일</th>
		<td>
			<input type="file" name="attachFile" /> <button type="button">추가</button>
		</td>
	</tr>
</table>

이 예제는 눌러도 작동되지 않습니다. ㅎ

좀 더 현실적인 모습으로 만들어 보았습니다.
추가 버튼을 여러번 눌러서 파일을 여러개 올릴 수 있도록 하려고 합니다.

하지만 !!! 이 예제는
추가 버튼을 누르면 한번만 작동되고 그 다음부터는 원하는대로 추가 되지 않을겁니다.

제목 .
내용 .
첨부파일

HTML

<!-- 테이블을 하나 만들고 안보이게 설정합니다 -->
<!-- 아래 테이블의 TR을 그대로 읽어다가 추가할 때 사용할 겁니다 -->
<!-- 기존 요소를 그대로 가져다가 원하는곳에 추가시키는 방법입니다 -->
<!-- 컨트롤 C, V 생각하시면 되겠습니다. ㅎㅎ -->
<table id="preset" style="display:none;">
	<tr name="tr_attach_file">
		<th>첨부파일</th>
		<td>
			<input type="file" name="attachFile" />
		</td>
	</tr>
</table>

<form name="form1" method="post" action="">
<table cellpadding="5" cellspacing="0" border="1">
	<tr>
		<th>제목</th>
		<td>.</td>
	</tr>
	<tr>
		<th>내용</th>
		<td>.</td>
	</tr>
	<tr name="tr_attach_file">
		<th>첨부파일</th>
		<td>
			<input type="file" name="attachFile" /> <button type="button" onclick="addFile()">추가</button>
		</td>
	</tr>
	<!-- 추가 버튼을 누르면 위 숨겨진 테이블의 tr 을 가져다가 추가할 겁니닷 -->
</table>
</form>

자바스크립트

function addFile(){
	$('[name=form1] [name=tr_attach_file]:last').after( $('#preset tr') );
	// $('#preset tr') : id=preset 에서 tr 요소 셀렉트 하여
	// form1 안에 이름이 tr_attach_file 인것 중 마지막 것 다음에 추가합니다.
	// 이렇게 하면 실행때 마다 동적으로 하나씩 추가됩니다.
}


버튼을 누를때 마다 추가되어야 하는데 왜 안될까요? 다음 예제를 봅시다.

위 예제의 문제는 ?

버그 그런건 아닙니다. ㅎㅎ

$('#preset tr') 이 부분에 주목 !!
위 셀렉터는 숨겨진 테이블의 tr 태그를 의미하는데요. 이걸 복사해서 사용하려고 했습니다.

하지만 after( $('#preset tr') ) 이렇게 하면 after 메소드를 이용하여 원하는 추가가 됩니다만..
복사해서 추가된 것이 아니고 그대로 가져와서 추가한것 즉 이동이 됩니다.

그래서 다시 $('#preset tr') 를 하면 이미 내용이 옮겨가서 없어진 상태라 가져올게 없습니다.

컨트롤 C, V 를 원했는데.. 컨트롤 X, V 가 된거죠.
이러면 안되지 말입니다. 복사를 한게 아니고 이동을 했습니다.
여기서 깨달을음 얻고 이 글을 작성하게 되었습니다.

되면 한다 !!

하면 되는게 아니고 되면 하는겁니다.
내공이 쌓인다면 안되는건 빠르게 판단하는 능력이 생기게 됩니다.
안되는건 안되는거니까요. ㅎㅎ

자 그럼 간단히 해결해 보겠습니다.
제이쿼리 clone() 메서드를 사용하는 겁니다. 클론? 네 그겁니다. 복제 !
추가 버튼을 눌러보세요.

제목 .
내용 .
첨부파일

HTML

<table id="preset" style="display:none;">
	<tr name="tr_attach_file">
		<th>첨부파일</th>
		<td>
			<input type="file" name="attachFile" />
		</td>
	</tr>
</table>

<form name="form1" method="post" action="">
<table cellpadding="5" cellspacing="0" border="1">
	<tr>
		<th>제목</th>
		<td>.</td>
	</tr>
	<tr>
		<th>내용</th>
		<td>.</td>
	</tr>
	<tr name="tr_attach_file">
		<th>첨부파일</th>
		<td>
			<input type="file" name="attachFile" /> <button type="button" onclick="addFile()">추가</button>
		</td>
	</tr>
	<!-- 추가 버튼을 누르면 위 숨겨진 테이블의 tr 을 가져다가 추가할 겁니닷 -->
</table>
</form>

자바스크립트

function addFile(){
	$('[name=form1] [name=tr_attach_file]:last').after( $('#preset tr').clone() );
	// $('#preset tr').clone() : id=preset 에서 tr 요소 셀렉트 하여 복제 !!
	// form1 안에 이름이 tr_attach_file 인것 중 마지막 것 다음에 추가합니다.
	// 이렇게 하면 실행때 마다 동적으로 하나씩 추가됩니다.
}



$( '#preset tr' ).clone()

실행 가능한 소스

마치며

$().clone()

원래 생각했던 것과 다른 처리가 되서 알게된 내용을 올려보았습니다.
많이 했다고 생각했는데.. 역시 끝은 없네요.

즐거운 개발 되시기 바랍니다. !!

즐거운 개발 이에요~ !!

개발1

개발2

정직한 제목 정직한 내용