웹개발
Category
JSP/Servlet
ASP
ASP.NET
PHP
웹디자인
Category
Photoshop
Illustrator
Flash
클라이언트 스크립트
Category
●
Javascript Example
Javascript
CSS3
HTML5
데이타 베이스
Category
MySQL
MSSQL
커뮤니티
Category
공지사항
개발자마당
엔지니어마당
자유마당
플래쉬게임
여행과정보
질문과 답변
Category
웹개발 질문과답변
디자인 질문과답변
자료실
Category
이미지 자료실
개발 자료실
클럽
Category
자동차클럽
하늘소리
공이랑
Javascript Example
Javascript
CSS3
HTML5
Javascript Example
제 목
[INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다. (#2)
작성자
운영자
등록일
20081206203645
조회수
38,257
버튼을 클릭하면 Table Row 가 추가, 삭제되는 아래의 예제를 PHP에서 사용할 수 있도록 INPUT 박스의 이름만 배열형태로 바꾼 예제입니다.
이 예제역시
IE
전용입니다.
www.webmadang.net
*
추가버튼을 클릭해 보세요.
<html> <head> <title>www.webmadang.net</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="javascript"> <!-- var oTbl; //Row 추가 function insRow() { oTbl = document.getElementById("addTable"); var oRow = oTbl.insertRow(); oRow.onmouseover=function(){oTbl.clickedRowIndex=this.rowIndex}; //clickedRowIndex - 클릭한 Row의 위치를 확인; var oCell = oRow.insertCell(); //삽입될 Form Tag var frmTag = "<input type=text name=addText[] style=width:350px; height:20px;> "; frmTag += "<input type=button value='삭제' onClick='removeRow()' style='cursor:hand'>"; oCell.innerHTML = frmTag; } //Row 삭제 function removeRow() { oTbl.deleteRow(oTbl.clickedRowIndex); } function frmCheck() { var frm = document.form; for( var i = 0; i <= frm.elements.length - 1; i++ ){ if( frm.elements[i].name == "addText[]" ) { if( !frm.elements[i].value ){ alert("텍스트박스에 값을 입력하세요!"); frm.elements[i].focus(); return; } } } } //--> </script> </head> <body> <form name="form" method="post"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="left" bgcolor="#FFFFFF"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5" bgcolor="#FFFFFF" height="25" align="left"><input name="addButton" type="button" style="cursor:hand" onClick="insRow()" value="추가"> <font color="#FF0000">*</font>추가버튼을 클릭해 보세요.</td> </tr> <tr> <td height="25"> <table id="addTable" width="400" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" border="0"> <tr> <td><input type="text" name="addText[]" style="width:350px; height:20px;"></td> <td align="left"></td> </tr> </table></td> </tr> </table> </td> </tr> </table> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="10"> </td> </tr> <tr> <td align="center"> <input type="button" name="button" value="확인" onClick="frmCheck();"> </td> </tr> </table> </form> </body> </html>
5
0
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
288
[CHECKBOX] 체크박스 한번에 선택/해제하기 (#2)
운영자
0 /
0
24834
2008-10-22
287
[MENU] 트랜지션효과 드롭다운 메뉴
운영자
2 /
1
27861
2008-10-08
286
[SELECTBOX] SELECT 박스에 새로운 항목이 추가됩니다.
운영자
0 /
0
26019
2008-10-06
285
[TIME] 오늘날짜와 이전,이후 날짜 구하기
운영자
1 /
0
24922
2008-10-03
284
[MENU] 사라졌다 나오는 LEFT 메뉴
운영자
0 /
0
31388
2008-10-02
283
[TEXTAREA] Text Area 뉴스 스티커
운영자
0 /
0
24061
2008-10-01
282
[CHECK BOX] 체크박스에 체크한 값 가져오기
운영자
8 /
32
58894
2008-09-30
281
[LOGIN] 로그인 유효성 검사
운영자
6 /
0
41181
2008-09-27
280
[INPUT BOX] 포커스 이동에 따른 이벤트
운영자
0 /
0
25742
2008-09-27
279
[INPUT BOX] 문자 코드값 알아내기
운영자
0 /
0
24389
2008-09-27
278
[POPUP] 팝업 생성기
운영자
0 /
0
25875
2008-09-26
277
[MENU] 토글메뉴
운영자
0 /
0
29246
2008-09-25
276
[INPUT BOX] 동적으로 INPUT BOX 생성하기
[1]
운영자
2 /
0
29525
2008-09-25
275
[EDITOR] 이지웹 에디터
운영자
0 /
0
27632
2008-09-24
274
[INPUT BOX] INPUT 박스에 지정한 갯수가 차면 커서가 다음 박스로 이동하는 소..
운영자
0 /
0
24071
2008-09-24
273
[SELECT] 두개의 셀렉트 박스 이동하기
운영자
0 /
0
26016
2008-09-24
272
[GRAPH] 동적 막대그래프
운영자
0 /
0
29470
2008-09-23
271
[INPUT BOX] 입력이 잘못되면 색상이 강조됩니다.
운영자
0 /
0
26169
2008-09-22
270
[TEXTAREA] 실시간 HTML 뷰어
운영자
0 /
0
28820
2008-09-20
269
[CHECK BOX] 체크폼
운영자
0 /
0
24432
2008-09-19
268
[INPUT BOX] 페이지 로딩시 첫번째 필드의 특정 항목 자동선택 시키기
운영자
0 /
0
25419
2008-09-18
267
[CHECK BOX] 체크박스가 아닌곳을 선택해도 체크가 됩니다.
운영자
0 /
0
23474
2008-09-17
266
[INPUT BOX] 정규식을 이용한 간단한 폼체크
운영자
0 /
0
24773
2008-09-16
265
[TEXT] 텍스트 롤링(Vertical Scrolling) 자바 스크립트 (#3)
운영자
0 /
0
30562
2008-09-16
264
[TEXT] 텍스트 롤링(Vertiacl Scrolling) 자바 스크립트 (#2)
운영자
0 /
0
26711
2008-09-11
[1]
[2]
[3]
4
[5]
[6]
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자