웹개발
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,285
버튼을 클릭하면 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
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
363
[TEXT] 텍스트 링크에 마우스 오버 시 텍스트 변경하기
[1]
운영자
3 /
1
27126
2018-05-01
362
[JQuery] 휴대폰 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
3 /
1
31228
2018-04-12
361
[JQuery] 사업자 번호를 입력하면 자동으로 하이픈을 붙여줍니다.
운영자
1 /
0
29660
2018-04-11
360
[INPUT BOX] 평수를 제곱미터(㎡)로 제곱미터(㎡)를 다시 평수로 계산해줍니다.
[1]
운영자
2 /
0
26845
2016-01-13
359
[BUTTON] 화면 우측하단에 고정되어있는 버튼
운영자
10 /
0
31388
2010-04-21
358
[ETC] Html의 태그를 제거하는 자바스크립트 소스입니다.
운영자
3 /
0
30820
2010-03-08
357
[SELECT BOX] 멀티플 SELECT BOX에서 OPTION VALUE 가져오기
운영자
3 /
0
39962
2010-02-23
356
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가,삭제됩니다.
운영자
3 /
0
35947
2010-02-10
355
[SELECT BOX] SELECT 박스에 항목이 동적으로 추가됩니다.
운영자
0 /
0
28939
2010-02-05
354
[TEXT] 한글자씩 글자 색이 채워집니다.
운영자
2 /
0
28401
2010-01-27
353
[TEXT] 텍스트가 한글자씩 지정된 색상으로 바뀌는 효과
운영자
0 /
0
27107
2010-01-21
352
[TEXTAREA] 버튼을 클릭하면 텍스트에어리어(TEXTAREA) 의 내용이 전체 선택됩니..
운영자
2 /
0
30303
2010-01-05
351
[LAYER] 드롭&다운 판넬
운영자
1 /
1
29550
2009-10-14
350
[POPUP] 움직이는 팝업 레이어
운영자
2 /
0
28884
2009-10-13
349
[RADIO] 레디오 버튼의 선택 유무 체크하기 3
운영자
1 /
1
25111
2009-09-12
348
[INPUT BOX] 입력되는 단어의 첫글자를 대문자로 바꾸기
운영자
0 /
0
27937
2009-06-09
347
[INPUT BOX] 정규식을 이용한 숫자입력 체크 소스입니다.
운영자
1 /
0
36333
2009-03-03
346
[MENU] 가로형 텍스트 레이어 메뉴
운영자
1 /
0
34260
2009-02-20
345
[LAYER] 클릭하면 레이어 인덱스 위치가 바뀝니다.
운영자
0 /
0
25377
2009-02-19
344
[INPUT BOX] 공백(스페이스) 입력시 경고창
운영자
1 /
0
28961
2009-02-18
343
[SELECT MENU] 세이클럽 형식 펼침목록 메뉴
운영자
0 /
0
27441
2009-02-17
342
[LAYER] 레이어 보이기/숨기기
운영자
2 /
0
28202
2009-02-16
341
[TABLE] sort 테이블 II
운영자
0 /
0
28224
2009-02-07
340
[TABLE] sort 가능한 테이블
운영자
0 /
0
30358
2009-02-06
339
[RADIO BOX] 라디오 박스를 선택하면 input 박스가 나타납니다.
운영자
0 /
0
26609
2009-02-04
1
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자