자바스크립트 표 (table) 동적으로 만들기

자바스크립트 로 테이블을 동적으로 만드는 방법입니다. 이 방법을 사용하면 일일히 수동으로 만들지 않아도 자동으로 원하는 만큼 표를 만들 수 있습니다. 백만개도 만들 수 있어요호호호^^ 대신 만들면 시간 엄청 걸립니다.

HTML

<input type="number" id="myNumber" value="10">
<input type="button" onclick="makeTable()" value="표만들기">
<input type="button" onclick="clearAll()" value="지우기">
<div id="result"></div>

SCRIPT

<script>
    const makeTable = () => {
        let myNumber = document.querySelector("#myNumber").value;
        let str = "";
        str += "<table border=1 width=100%>"
        for (let i = 1; i <= myNumber; i++) {
            str += "<tr><td>" + i + "</td></tr>"
        }
        str += "</table>"
        document.getElementById("result").innerHTML = str;
        console.log(myNumber)
    }

    const clearAll = () => {
        document.getElementById("result").innerHTML = "";
    }
</script>

결과