<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test024.html</title>
<style type="text/css">
/* 나의 스타일.. 명령 프롬프트 */
*
{
background-color: #047b88;
font-family: 나눔고딕코딩;
font-size: 20pt;
color: #ababab;
font-weight: bold;
}
</style>
<script type="text/javascript">
function insertMember()
{
//alert("함수호출~");
// 사용자가 input한 value 를 변수(name, tel, addr) 에담기
var name = document.getElementById("txtName").value;
var tel = document.getElementById("txtTel").value;
var addr = document.getElementById("txtAddr").value;
// 테스트
//alert(name + " " + tel + " " + addr );
// table 엘리먼트 접근
var tableNode = document.getElementById("memberTbl");
// table 형식
// 통상적 table tr td
// 논리적 table thead th tbody tr td
// tbody 엘리먼트 접근 → 사용하지 않는 경우 생략
// ※ 주의. 브라우저에 따라 다른 결과
/*
if (tableNode.childNodes[0].nodeType==1)
{
tbodyNode = tableNode.childNodes[0];
}
else
{
tbodyNode = tableNode.childNodes[1];
}
// 테스트
alert(tableNode.childNodes[0].nodeType);
*/
// <tr></tr> 엘리먼트 동적 생성
// <td></td> 엘리먼트 동적 생성
var trNode = document.createElement("tr"); // <tr></tr>
/*
var tdNode1 = document.createElement("td"); // <td></td>
var nameNode = document.createTextNode(name); // <td> 노드에 추가할 "김정용" 텍스트 노드 생성
var tdNode2 = document.createElement("td"); // <td>노드에 추가할 010-5555-5555텍스트 노드 생성
var telNode = document.createTextNode(tel);
var tdNode3 = document.createElement("td"); // <td>노드에 추가할 경기도 분당 텍스트 노드 생성
var addrNode = document.createTextNode(addr);
// append 요소를 추가하다...
// td 노드를 만들어서.. 만든 노드에 append(추가할내용) 이런식으로 삽입..
// 결과적으로 td에 삽입되는것임
tdNode1.appendChild(nameNode);
tdNode2.appendChild(telNode);
toNode3.appendChild(addrNode);
*/
trNode.appendChild(createTdNode(name)); // <tr><td> 김정용 </td></tr>
trNode.appendChild(createTdNode(tel)); // <tr><td> 010-5555-5555 </td></tr>
trNode.appendChild(createTdNode(addr)); // <tr><td> 경기도 분당 </td></tr>
tableNode.appendChild(trNode);
/* ↓↓↓↓↓↓
<table>
<tr><td> 김정용 </td></tr>
<tr><td> 010-5555-5555 </td></tr>
<tr><td> 경기도 분당 </td></tr>
</table>
*/
//alert("사랑해");
}
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>
<button type = "button" onclick = "insertMember()">회원 정보 입력</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-1122-1221</td>
<td>전남 여수</td>
</tr>
<tr>
<td>김민성</td>
<td>010-3333-3333</td>
<td>경남 산청</td>
</tr>
<tr>
<td>오이삭</td>
<td>010-3344-4433</td>
<td>서울 강남</td>
</tr>
</table>
</form>
</div>
</body>
</html>728x90
'WEB Archive' 카테고리의 다른 글
| [HTML] Javascript - 여러명의 이름과 전화번호를 입력받고 그 내용을 출력하는 페이지 구현 (textarea) (0) | 2024.08.21 |
|---|---|
| [HTML] Javascript - 여러명의 성적 데이터를 입력받고 등수를 부여하여 출력하는 페이지 구현 prompt() 활용 (0) | 2024.08.21 |
| [HTML] Javascript - 만년달력 만들기, 테이블 자식으로 달력 날짜를 붙여가는 개념 (0) | 2024.08.21 |
| [HTML] Javascript - Math.Random() 이용해서 가위바위보 게임 구현하기 (0) | 2024.08.21 |
| [HTML] Javascript - 난수를 발생시켜 로또번호를 출력시키는 함수 만들기 (2) | 2024.08.21 |
댓글