<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test024.html</title>
<style type="text/css">
input{font-family: 나눔고딕코딩; font-weight: bold;}
input:focus {background-color: #eeeedd;}
input:btn {width: 80px; font-weight: bold; font-family: 맑은 고딕}
input.btn:hover {color: orange;}
td {text-align: center;}
.txt {text-align: center; border-radius: 4px;}
.txtScore {text-align: right; border-radius: 4px;}
.txtResult {color: red;}
</style>
<script type="text/javascript">
function addMember()
{
//alert("함수 호출 확인");
var name = document.getElementById("txtName").value;
var tel = document.getElementById("txtTel").value;
var addr = document.getElementById("txtAddr").value;
// 테스트
// alert(name + " " + tel + " " + addr);
var tableNode = document.getElementById("memberTbl");
//tbody엘리먼트 접근 ->사용하지 않는 경우 생략
// ※주의 . 브라우저에 따라 다른 결과
/* var tbodyNode=null;
if(tableNode.chilNodes[0].nodeType==1)
{
tbodyNode=tableNode.childNodes[0]; //IE (internetexplore)
}
else
{
tbodyNode=tableNode.childNodes[1]; //CR,FF (크롬,파이어폭스)
}
*/
//<tr></tr> 엘리먼트 동적 생성
//<td></td>엘리먼트 동적 생성
// ->"박종호" 텍스트 데이터를 <td>엘리먼트에 추가
// -><td>"박종호"</td>
//구성된 <td>엘리먼트를 <tr>엘리먼트에 추가
// -><tr><td>"박종호"</td></tr>
// ... 전화번호와 주소도 같은 방법으로 추가
//방법1,2 공통 변수 선언
var trNode = document.createElement("tr"); //tr엘리멘트를 "창조"할거다. 즉, <tr></tr>을 만듦.
/*
--------------------------------------------------------
방법1)함수말고 직접 명시해서 하는 방법
var tdNode1 = document.createElement("td"); // <td></td>생성
var nameNode = document.createTextNode(name); //<td>노드에 추가할 "박종호" 노드 생성
var tdNode2 = document.createElement("td"); //<td></td>
var telNode = document.createTextNode(tel);
var tdNode3 = document.createElement("td");
var addrNode = document.createTextNode(addr); //<td>노드에 추가할 "주소"노드 생성
tdNode1.appendChild(nameNode); //<td>"박종호"</td> 한것.
tdNode2.appendChild(telNode); //<td>"010-4444-4444"</td>
tdNode3.appendChild(addrNode);
// ->이것들을 trNode에 끼워 넣어아햐마
trNode.appendChild(tdNode1); //<tr><td>박종호</td></tr>
trNode.appendChild(tdNode2); //<tr><td>박종호</td></tr><tr><td>010-4444-4444</td></tr>
trNode.appendChild(tdNode3); //<tr><td>박종호</td></tr><tr><td>010-4444-4444</td></tr><tr><td>서울 마포구</td></tr>
//마지막으로 tableNode 에 조립된 trNode 끼워넣기
*/
/* 방법2 함수로 뽑아내서 추가하기) */
trNode.appendChild(createTdNode(name));
trNode.appendChild(createTdNode(tel));
trNode.appendChild(createTdNode(addr));
tableNode.appendChild(trNode);
function createTdNode(val)
{
var textNode=document.createTextNode(val);
var tdNode =document.createElement("td");
tdNode.appendChild(textNode);
return tdNode;
}
}
</script>
</head>
<body>
<div>
<h1>자바스크립트를 활용한 테이블 동적 생성</h1>
<hr>
</div>
<div>
<form>
이름 <input type="text" id="txtName" class="txt"><br>
전화번호 <input type="text" id="txtTel" class="txt"><br>
주소 <input type="text" id="txtAddr" class="txt"><br>
<br>
<button type="button" class="btn" style="width: 220px;" onclick="addMember()">회원 정보 입력</button>
<br><br><br>
<table border="1" id="memberTbl">
<tr>
<td>이름</td><td>전화번호</td><td>주소</td>
</tr>
<tr>
<td>최창훈</td><td>010-1111-1111</td><td>제주 서귀포</td>
</tr>
<tr>
<td>한현수</td><td>010-2222-2222</td><td>서울 은평구</td>
</tr>
<tr>
<td>이현지</td><td>010-3333-3333</td><td>전남 여수</td>
</tr>
</table>
</form>
</div>
</body>
</html>