<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM</title>
<style type="text/css">
*{
padding: 0px; margin: 0px;
font-size: 10pt;
font-famaily: 돋움;
}
</style>
<script type="text/javascript">
var uid=0; //전역 변수
function add() {
var name=document.getElementById("name").value;
var kor=document.getElementById("kor").value;
var eng=document.getElementBy
Id("eng").value;
var mat=document.getElementById("mat").value;
if(!name||!kor|| !eng||!mat) {
alert("다 입력 하삼........");
return;
}
//동적으로 테이블을 tr과 td 추가
var row, col;
var tb=document.getElementById("tb");
var id="t"+(++uid);
// tr태그 만들기
row=document.createElement("tr");
// 속성 부여
row.setAttribute("id",id );
row.setAttribute("heght","25");
// td 태그 만들기
col=document.createElement("td");
col.appendChild(document.createTextNode(name)); // 입력받은 텍스트 만듬
col.setAttribute("align","center"); // td에 속성값을 줌
row.appendChild(col); //tr(row)에 td(col)을 집어너줌
col=document.createElement("td");
col.appendChild(document.createTextNode(kor));
col.setAttribute("align","center");
row.appendChild(col);
col=document.createElement("td");
col.appendChild(document.createTextNode(eng));
col.setAttribute("align","center");
row.appendChild(col);
col=document.createElement("td");
col.appendChild(document.createTextNode(mat));
col.setAttribute("align","center");
row.appendChild(col);
col=document.createElement("td");
var btn=document.createElement("input");
btn.setAttribute("type","button");
btn.setAttribute("value","수정");
// btn.setAtrribute("style","border:1px solid blue; width:70px");
btn.onclick=function() {update(id);};
col.appendChild(btn);
btn=document.createElement("input");
btn.setAttribute("type","button");
btn.setAttribute("value","삭제");
// btn.setAtrribute("style","border:1px solid blue; width:70px");
btn.onclick=function() {remove(id);};
col.appendChild(btn);
col.setAttribute("align","center");
row.appendChild(col);
// tbody에 tr추가
tb.appendChild(row);
document.getElementById("name").value="";
document.getElementById("kor").value="";
document.getElementById("eng").value="";
document.getElementById("mat").value="";
}
function update(id){
var tb=document.getElementById("tb");
var tid=document.getElementById(id);
//srcElement:이벤트를 발생 시킨 객체
var title=event.srcElement.value;
if(title=="완료"){
var iis=tid.getElementsByTagName("input");
var arr=new Array();
for(var i=0; i<iis.length; i++) {
if(iis[i].type=="text"){
var v=iis[i].value;
if(! v){
alert("데이터 ?");
iis[i].focus();
return;
}
arr[i]=v;
}
}
for(var i=0; i<tid.childNodes.length-1; i++){
tid.childNodes[i].removeChild(tid.childNodes[i].firstChild);
tid.childNodes[i].appendChild(document.createTextNode(arr[i]));
}
event.srcElement.value="수정";
}else if((title=="수정")){
for(var i=0; i<tid.childNodes.length-1; i++){
var v=tid.childNodes[i].firstChild.nodeValue;
tid.childNodes[i].removeChild(tid.childNodes[i].firstChild);
var t=document.createElement("input");
t.setAttribute("type","text");
t.setAttribute("value",v);
t.setAttribute("style","border:1px solid blue; width:70px");
tid.childNodes[i].appendChild(t);
}
event.srcElement.value="완료";
}
}
function remove(id){
if(! confirm("삭제 하시겠습니까?"))
return;
var tb=document.getElementById("tb");
var tid=document.getElementById(id);
tb.removeChild(tid);
}
</script>
</head>
<body>
<center>
<br/><br/>
<table width="400" cellpadding="0" cellspacing="1" bgcolor="#C4C4C4">
<caption>성적처리</caption>
<tr height="25">
<td align="center" width="100" bgcolor="#E4E4E4">이름</td>
<td align="left" style="padding-left: 5px" bgcolor="#ffffff">
<input type="text" id="name"/>
</td>
</tr>
<tr height="25">
<td align="center" width="100" bgcolor="#E4E4E4">국어</td>
<td align="left" style="padding-left: 5px" bgcolor="#ffffff">
<input type="text" id="kor"/>
</td>
</tr>
<tr height="25">
<td align="center" width="100" bgcolor="#E4E4E4">영어</td>
<td align="left" style="padding-left: 5px" bgcolor="#ffffff">
<input type="text" id="eng"/>
</td>
</tr>
<tr height="25">
<td align="center" width="100" bgcolor="#E4E4E4">수학</td>
<td align="left" style="padding-left: 5px" bgcolor="#ffffff">
<input type="text" id="mat"/>
</td>
</tr>
</table>
<table width="400">
<tr height="50">
<td align="center">
<input type="reset" value="다시입력" style="width: 80px; height: 25px;"/>
<input type="button" value="추가하기" style="width: 80px; height: 25px;" onclick="add();"/>
</td>
</tr>
</table>
<br/><br/>
<table width="500" border="1" cellpadding="0" cellspacing="0">
<tr height="25">
<td width="100" align="center"> 이름 </td>
<td width="100" align="center"> 국어 </td>
<td width="100" align="center"> 영어 </td>
<td width="100" align="center"> 수학 </td>
<td width="100" align="center"> 수정 </td>
</tr>
<tbody id="tb"></tbody>
</table>
</center>
</body>
</html>
'javascript' 카테고리의 다른 글
| 자바스크립트 날짜관련 함수 (0) | 2013.09.26 |
|---|---|
| 자바스크립트 확인 취소 창 (0) | 2013.09.08 |
| 함수에서 오브젝트에 접근하는 방법들 (0) | 2013.06.25 |
| 자바스크립트 기본 예제(마우를 클릭드래그하여 오브젝트 이동 시키기) (0) | 2013.06.25 |
| onkeyup / onkeydown / onkeypress 검증하기 (0) | 2013.06.25 |