<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function sub() {
var name = document.getElementById("name");
var age = document.getElementById("age");
var tel = document.getElementById("tel");
var addr = document.getElementById("addr");
var tbl = document.getElementById("tbl");
// 요소만들기
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");
var btn = document.createElement("button");
btn.innerText="삭제"
//alert(tbl.nodeType);
btn.onclick = function(){
tbl.deleteRow();
}
//텍스트노드 만들기
var txt1 = document.createTextNode(name.value);
var txt2 = document.createTextNode(age.value);
var txt3 = document.createTextNode(tel.value);
var txt4 = document.createTextNode(addr.value);
td1.appendChild(txt1);
td2.appendChild(txt2)
td3.appendChild(txt3)
td4.appendChild(txt4)
td5.appendChild(btn)
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tbl.appendChild(tr);
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<div align="center">
<span class="text1">이름</span>
</div>
</td>
<td>
<div align="center">
<span class="text1">나이</span>
</div>
</td>
<td>
<div align="center">
<span class="text1">전화</span>
</div>
</td>
<td>
<div align="center">
<span class="text1">주소</span>
</div>
</td>
</tr>
<tr>
<td><label> <input name="name" type="text" id="name" />
</label></td>
<td><label> <input name="age" type="text" id="age" />
</label></td>
<td><label> <input name="tel" type="text" id="tel" />
</label></td>
<td><label> <input name="addr" type="text" id="addr" />
</label></td>
</tr>
<tr>
<td colspan="4" height="25">
<div align="center">
<span class="text3"> <input name="in" type="button" id="in"
value="입력" style="height: 25px; width: 100px;"
onclick="JavaScript:sub()" />
</span>
</div>
</td>
</tr>
</table>
</tr>
<tr>
<td height="40">
<table width="650" border="0" bgcolor="#FFFFFF">
<td height="30" bgcolor="#FFFFFF"><div align="center">
<span class="text3">고객 정보 목록 보기</span>
</div></td>
</table>
</td>
</tr>
</table>
<table width="655" id="tbl" border="1">
<tr>
<td>
<div align="center">
<span class="text1">이름</span>
</div>
</td>
<td>
<div align="center">
<span class="text1">나이</span>
</div>
</td>
<td>
<div align="center">
<span class="text1">전화</span>
</div>
</td>
<td>
<div align="center">
<span class="text1">주소</span>
</div>
</td>
<td>
<div align="center">
<span class="text1">삭제</span>
</div>
</td>
</tr>
</table>
</body>
</html>
'it > JavaScript' 카테고리의 다른 글
| 주소 받아오기 (0) | 2014.08.21 |
|---|---|
| JavaScript 기본 (0) | 2014.08.21 |
| getElementById (0) | 2014.08.19 |
| up and down (0) | 2014.08.19 |
| 여행 (0) | 2014.08.19 |
