유용해보여서 가져옴
http://www.webmadang.net/javascript/javascript.do?action=read&boardid=8001&page=4&seq=362
| 버튼을 클릭하면
텍스트박스(INPUT 박스)가 동적으로 추가,삭제 된다고 했으나 실제로는 DOM(Document Object Model)을 이용한 Table Row 추가, 삭제 관련 자바스크립트 소스로 동적 생성된 텍스트 박스의
값을 체크하는 루틴도 포함되어 있습니다. IE 전용입니다. |
| ||||||||||||||||
<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>
'차근차근 > JAVA Script' 카테고리의 다른 글
| 중첩함수 / 클로저 (0) | 2014.07.29 |
|---|---|
| <input type="text"> (0) | 2014.07.29 |
| innerHtml , jsp 변숫값 자바스크립트에서 가져올 때 갱신하기 (0) | 2014.07.29 |
| innertHTML (0) | 2014.07.29 |
| 자바스크립트변수 jsp에서 사용 (3) | 2014.07.29 |