자바스크립트 마우스클릭시 새로운 테이블 생성, 삭제

관리X 과거글

by 까먹기전에 2014. 12. 4. 20:13

<html>

<head>

td { border:1px solid navy; width:50px; height:50px;}

</style>

window.onload=function(){

tableTag=document.createElement("table");

con.appendChild(tableTag);

for(var r=0,num=1; r<3; r++){

var trTag=document.createElement("tr");

trTag.onmouseover=mOver;

trTag.onmouseout=mOut;

trTag.onclick=clickFunc;

for(var c=0; c<3; c++,num++){

var tdTag=document.createElement("td");

tdTag.innerHTML=num;

trTag.appendChild(tdTag);

}

tableTag.appendChild(trTag);

}

function mOver(){ this.style.background="skyblue"; }

function mOut(){ this.style.background=""; }

function clickFunc(){

trTag=document.createElement("tr");

tdTag=document.createElement("td");

tdTag.colSpan="4";

tdTag.innerHTML="추가됨~";

trTag.appendChild(tdTag);

this.parentNode.insertBefore(trTag,this.nextSibling);

trTag.onclick=addremove;

}

function addremove(){

tableTag.removeChild(this);

}

</script>

</head>

<body>

</body>

</html>

자바 arrayList 예제 (0)	2014.12.04
자바 초급 종합문제 (0)	2014.12.04
자바스크립트 숫자박스 추가하기 삭제하기 (0)	2014.12.04
자바스크립트 window.clearInterval , window.setInterval 을 이용한 글자 한개씩 뽑기 (0)	2014.12.02
자바 버블정렬, 랜덤함수와 스캐너를 이용해 n개의 랜덤숫자를 재정렬 (0)	2014.11.27