<HTML>
<HEAD>
<style type="text/css">
td{border:2px solid blue;}
</style>
<script language="javascript">
function a(){
var num1=txt1.value; // txt1의 값을 num1에 초기화 시킨다.
var num2=txt2.value; // txt2의 값을 num2에 초기화 시킨다.
var count=1;
for(var i=0;i<num1;i++){
var trObj=document.createElement("tr"); //txt1에 입력된 값만큼 for문을 돌려 tr태그를 생성
for(var j=0;j<num2;j++){
var tdObj=document.createElement("td"); //txt2에 입력된 값만큼 for문을 돌려 td태그를 생성
trObj.appendChild(tdObj);
tdObj.innerHTML=count; //생성된 td에 count를 innerHTML로 집어 넣는다.
count++; //count를 for문을 돌리는 만큼 증가시킨다.
}
divObj.appendChild(trObj); //div 태그에 tr태그를 붙여넣는다.
}
}
function b() {
var c=document.getElementById("b");
divObj.innerHTML=""; // div 를 ""을 넣어 초기화 시키다.
txt1.value="";
txt2.value="";
}
</script>
</HEAD>
<BODY>
<input type="text" id="txt1">줄
<input type="text" id="txt2">칸
<input type="button" value="생성" onclick="a()">
<input type="button" value="초기화" onclick="b()"><br>
<div id=divObj></div>
</BODY>
</HTML>
'javascript' 카테고리의 다른 글
| 자바스크립트 (0) | 2013.10.24 |
|---|---|
| <a>문서연결,문서내연결,상자위치 지정,이벤트 처리방식,String객체 (0) | 2013.10.22 |
| # 노드관련 메서드 (insertBefore,replaceChild,removeChild,appendChild) (0) | 2013.10.20 |
| innerText,innerHTML의 차이점? (0) | 2013.10.20 |
| insertAdjacentHTML 은 어디에 사용될까? (0) | 2013.10.20 |
