javascript

innerHTML을 활용한 테이블 생성하기

비오는시골길 2013. 10. 19. 23:19
반응형

 

<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>

반응형