<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test031.html</title>
<style type="text/css">
hr{ border:none; border:2px dashed #007a99; }
* {color: #334433; }
*{font-family: 나눔고딕코딩; font-weight: bold; font-size: 15pt;}
input:focus {background-color: #e6f5ff;}
.btn {width: 80px; font-weight: bold; font-family: 맑은 고딕}
.btn:hover {color: orange;}
td {text-align: center; background: #66c2ff;}
.txt {text-align: center; border-radius: 4px;}
.txtScore {text-align: right; border-radius: 4px;}
.txtResult {color: red;}
textarea {font-family: 나눔고딕코딩; font-weight: bold;}
</style>
<script type="text/javascript">
// select 를 다루어보기 위한 테스트 함수 정의
function selectTest()
{
// 첫 번째 방법
/*
var position = document.getElementById("userPosition").value;
alert(position);
*/
/*
// 두 번째 방법
var positionObj = document.getElementById("userPosition");
//alert(positionObj);
//--==>> [object HTMLselectElement]
var positionOptions = positionObj.options;
//alert(positionOptions);
//--==>> [object HTMLOptionsCollection]
for (var i = 0; i < positionOptions.length; i++)
{
if (positionOptions[i].selected)
{
//alert(positionOptions[i].value);
positionMsg = positionOptions[i].value;
break; //다중 선택이 허용된 컨트롤일 경우 사용 안함.
}
}
*/
// 세 번째 방법
var positionObj = document.getElementById("userPosition");
//alert(positionObj.selectedIndex);
//--==>> 부장 -> 0 과장 -> 1, 대리 -> 2, 사원 -> 3
//alert(positionObj.options[3].value);
//--==>> 직위코드_사원
var positionMsg = positionObj.options[positionObj.selectedIndex].value;
//alert(positionMsg);
}
function addMember()
{
var uName = document.getElementById("userName").value;
var uSsn = document.getElementById("userSsn").value;
var cityObj = document.getElementById("userCity");
//alert(cityObj.selectedIndex); //0서울 1대전 2광주 3대전
//alert(cityObj.options[cityObj.selectedIndex].value;); 서울 대전 광주 대구
var uCity = cityObj.options[cityObj.selectedIndex].value;
var departmentObj = document.getElementById("userDepartment");
var uDepartment = departmentObj.options[departmentObj.selectedIndex].value;
var positionObj = document.getElementById("userPosition");
var uPosition = positionObj.options[positionObj.selectedIndex].value;
var uBasicpay = document.getElementById("userBasicpay").value;
//테이블 그리기 ---------------------------------------------------------------------------
var tableNode = document.getElementById("memberList");
var trNode = document.createElement("tr");
trNode.appendChild(createTdNode(uName));
trNode.appendChild(createTdNode(uSsn));
trNode.appendChild(createTdNode(uCity));
trNode.appendChild(createTdNode(uDepartment));
trNode.appendChild(createTdNode(uPosition));
trNode.appendChild(createTdNode(uBasicpay));
tableNode.appendChild(trNode);
//--------------------------------------------------------------------------테이블 그리기
//폼 안의 내용물 초기화
// formClear();
document.forms[0].reset();
// 폼이 초기화가 되고, 첫번째 테이블에 커서를 옮겨주는 역할
document.getElementById("userName").focus();
}
function createTdNode(val)
{
var textNode = document.createTextNode(val);
var tdNode = document.createElement("td");
tdNode.appendChild(textNode);
return tdNode;
}
/* function formClear()
{
document.getElementById("userName").value ="";
document.getElementById("userSsn").value ="";
var cityObj = document.getElementById("userCity");
cityObj.options[0].selected = true;
var departmentObj = document.getElementById("userDepartment");
departmentObj.options[0].selected = true;
var positionObj = document.getElementById("userPosition");
positionObj.options[0].selected = true;
document.getElementById("userBasicpay").value ="";
} */
</script>
</head>
<body>
<!-- 옵션안에 기본값 즉,selected된경우 인덱스 값을 스크립트에서 바꿔야함. -->
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>선택목록(select) 다루기</h2>
<form>
<table>
<tr>
<td>이름</td>
<td>
<input type="text" id="userName" placeholder="ex) 홍길동">
</td>
</tr>
<tr>
<td>주민번호</td>
<td>
<input type="text" id="userSsn" placeholder="ex) 960722-2254412">
</td>
</tr>
<tr>
<td>지역</td>
<td>
<!-- <input type="text" id="userCity" placeholder="ex) 서울"> -->
<select id ="userCity" style="width: 85px">
<option value="지역코드_서울">서울</option>
<option value="지역코드_대전">대전</option>
<option value="지역코드_광주">광주</option>
<option value="지역코드_대구">대구</option>
</select>
</td>
</tr>
<tr>
<td>부서</td>
<td>
<!-- <input type="text" id="userDepartment" placeholder="ex) 개발부"> -->
<select id ="userDepartment" style="width: 85px">
<option value="부서코드_인사부">인사부</option>
<option value="부서코드_영업부">영업부</option>
<option value="부서코드_개발부">개발부</option>
<option value="부서코드_총무부">총무부</option>
</select>
</td>
</tr>
<tr>
<td>직위</td>
<td>
<!-- <input type="text" id="userPosition" placeholder="ex) 부장"> -->
<select id ="userPosition" style="width: 85px">
<option value="직위코드_부장">부장</option>
<option value="직위코드_과장">과장</option>
<option value="직위코드_대리">대리</option>
<option value="직위코드_사원">사원</option>
</select>
</td>
</tr>
<tr>
<td>기본급</td>
<td>
<input type="text" id="userBasicpay" placeholder="ex) 3000000">
</td>
</tr>
</table>
<!-- <input type="button" value="직원 추가" class="btn" style="width: 300px" onclick="selectTest()"> -->
<input type="button" value="직원 추가" class="btn" style="width: 300px" onclick="addMember()">
<br><br>
<table border="1px" id="memberList">
<tr>
<td>이름</td>
<td>주민번호</td>
<td>지역</td>
<td>부서</td>
<td>직위</td>
<td>기본급</td>
</tr>
</table>
</form>
<form> <!-- 이폼은 실행해도 클리어가 안된다. 클리어를 하고싶다면 document.forms[0].reset(); 인덱스 값을 0에서 1로 고쳐야 함-->
1.<input type="text">
2.<input type="password">
3.<input type="radio" name="rdoBtn" value ="a">a
<input type="radio" name="rdoBtn" value ="b">b
<br>
4.<input type="checkbox" name="checkGroup" value ="가">가
<input type="checkbox" name="checkGroup" value ="나">나
<input type="checkbox" name="checkGroup" value ="다">다
<input type="checkbox" name="checkGroup" value ="라">라
</form>
</div>
</body>
</html>