[JS-보충] 22-09-27 버튼 누를 시 테이블 생성

자바스크립트 javascript 

버튼 누를 시 테이블 생성 문제 풀기

---

1번문제 

1~20까지 들어있는 테이블을 버튼 클릭하면 console에 출력해보자

  <button id="myButton">버튼</button>
  <div id="console"></div>

function myString(){

  let myString ="<table border=1 width=50%>"
  let count = 1;
  
   for( var i=0; i<4; i++){
    myString += "<tr>";
     
     for(var j=0; j<5; j++){
           myString += "<td>"+ count++ +"</td>";
     }
     
      myString += "<tr>";
   }
  
    myString += "</table>";
    
    return myString;

}

window.onload =function(){
  document.getElementById("myButton").onclick = function(){
    document.getElementById("console").innerHTML = myString();
  }
}

2번문제 

행과 열을 입력받아 테이블을 만들고 안에 1부터 차례대로 출력하는테이블을 만드는 메소드를 만들어보자

window.onload = function(){
  document.getElementById("myButton").onclick=function(){
document.getElementById("console").innerHTML = myString(5,6);
  }
}

function myString(x,y){
  
  let myString ="<table border=1 width=50%>"
  let count = 1;
  
   for( var i=0; i<x; i++){
    myString += "<tr>";
     
     for(var j=0; j<y; j++){
           myString += "<td>"+ count++ +"</td>";
     }
     
      myString += "<tr>";
   }
  
    myString += "</table>";
    
    return myString;

}

window.onload 

화면이 다 불러지고나서 실행하게하는것.

innerHTML

HTML요소의 내용을 변경하고 싶은 경우에 사용