[Javascript] 점수테이블 만들기

그동안 공부한걸 좀 활용해보자.

이번에 만들어볼건 조금 복잡하다.

먼저 input 박스에 숫자를 입력하고 버튼을 누르면 이름, html, css, js 과목 input 박스들이 입력된 숫자만큼 나타나고,

각 박스에 데이터를 넣고 버튼을 누르면 이름별 각 과목의 점수, 총점, 평균을 테이블로 출력할 것이다.

 

먼저 html 태그를 잡아주자.

	<input type="text" id="headCount">
        <button type="button" id="sbmNmb" onclick="headcount()">인원제출</button>
        <button type="button" id="showTable">결과보기</button>
        <div id="inputArea"></div>
        <br>
        <div id="printArea">
            <table id="printTable"></table>
        </div>

사람 수를 기입할 input 박스를 첫줄에 작성

기입한 사람 수를 제출할 버튼이 두번째

기입된 이름과 점수들을 테이블로 띄울 버튼이 세번째줄에 있다. 

이름과 점수를 기입할 input 박스들은 네번째줄에 뜰 것이다.

 

열자 스크립트.

      	    let name = '';
            let html = 0;
            let css = 0;
            let js = 0;
            let cnt = 0;

사용할 전역변수들을 먼저 선언해준다.

 

	function headcount(){
                cnt = Number(document.getElementById('headCount').value);
                for(let i=0; i<cnt; i++){
                    document.getElementById('inputArea').innerHTML +=
                    `Name: <input type="text" id="name${i}"> HTML: <input type="text" id="html${i}"> CSS: <input type="text" id="css${i}"> JS: <input type="text" id="js${i}"><br>`;
                }
            }

인원제출 버튼을 누르면 작동할 펑션이다.

먼저 cnt 변수에 기입된 인원 수를 대입해준다.

그리고 for문을 둘려서 인원 수만큼 input 박스들을 inputArea로 출력시켜준다.

차후 사용하기 위해 각각의 id에는 i값을 붙여줬다.

 

중간 테스트. 잘 나타난다.

 

	 document.getElementById("showTable").addEventListener('click', function(){
                document.getElementById('printTable').innerHTML +=
                `<tr><th>Name</th><th>HTML</th><th>CSS</th><th>JS</th><th>Sum</th><th>Average</th><tr>`
                console.log(cnt);
                for(let i=0; i<cnt; i++){
                    name = document.getElementById(`name${i}`).value;
                    html = Number(document.getElementById(`html${i}`).value);
                    css = Number(document.getElementById(`css${i}`).value);
                    js = Number(document.getElementById(`js${i}`).value);
                    let sum = html+css+js;
                    let avg = (sum/3).toFixed(1);
                    document.getElementById('printTable').innerHTML +=
                    `<tr><td>${name}</td><td>${html}</td><td>${css}</td><td>${js}</td><td>${sum}</td><td>${avg}</td><tr>`
                }
            })

테이블 생성 버튼을 작성해준다.

첫번째줄에서 버튼 클릭을 받아오고..

두번째, 세번째 줄에서는 테이블의 th부.. 즉 최상단 열을 작성해준다.

네번째줄에서 cnt 콘솔출력은 무시해주시길. 처음에 전역번수 선언도 안하고는 뭐가 문제인가해서 테스트 삼아 넣어봤던거다..

다섯번째 줄 이하는 for문을 역시 cnt만큼 돌리는데, 각각의 요소들의 i 값을 가져다가 printTable 안에 HTML로 테이블 형태를 잡아 추가해줬다.

의도했던대로 출력된다.

 

내친김에 CSS도 살짝만 써서 꾸며주자.

 

	table{
            border: 2px solid black;
            background-color: rgb(155, 155, 155);
            border-radius: 3px;
        }
        th{
            border: 1px solid black;
            width: 60px;    
            border-radius: 3px;
            background-color: rgb(221, 221, 221);
        }
        tr{
            border: 1px solid black;
            border-radius: 3px;
        }
        td{
            border: 1px solid black;
            text-align: center;
            border-radius: 3px;
            background-color: rgb(250, 250, 250);
        }
        input[type=text]{
            width: 60px;
        }

간단하게만.

 

훨씬 깔끔해졌다.