[Javascript] 국영수 총점과 평균 나타내는 표 만들기

아래와 같은 표를 만들자

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 자바 책 151쪽 변형문제 -->
    <script type="text/javascript">
        let score = [
            [100, 100, 100],
            [20, 20, 20],
            [30, 30, 30],
            [40, 40, 40],
            [50, 50, 50]
        ];
        
        let html = '<table border="1">';
        html += '<tr>';
        html += '<td>번호</td>';
        html += '<td>국어</td>';
        html += '<td>영어</td>';
        html += '<td>수학</td>';
        html += '<td>총점</td>';
        html += '<td>평균</td>';
        html += '</tr>';
 
        for (let row=1; row<=5; row++) {
            html += '<tr>';
            html += '<td align="center">' + row + '</td>';
            let sum = 0;
            for(let i=0; i<3; i++) {
                html += '<td>' + score[row-1][i] + '</td>';
                sum += score[row-1][i];
            }
            // 총점
            html += '<td>' + sum + '</td>';
            //평균
            html += '<td>' + sum / score[row-1].length + '</td>';
 
            html += '</tr>';
        }
        
        html += '<tr>';
        html += '<td>총점</td>';        
        let koreasum = 0;
        for (let i=0; i<score.length; i++) {
            koreasum += score[i][0];
        }
        html += '<td>' + koreasum + '</td>';
 
 
        let englishsum = 0;
        for (let i=0; i<score.length; i++) {
            englishsum += score[i][0];
        }
        html += '<td>' + englishsum + '</td>';
 
 
        let mathsum = 0;
        for (let i=0; i<score.length; i++) {
            mathsum += score[i][0];
        }
        html += '<td>' + mathsum + '</td>';
 
 
        html += '<td></td>';
        html += '<td></td>';
        
        html += '</tr>';
        html += '</table>';
 
        document.write(html);
    </script>
</body>
</html>

아래의 코드를 베이스로 하여 만들면 더 간단하다

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        const scores1 = [
            [100, 100, 100],
            [20, 20, 20],
            [30, 30, 30],
            [40, 40, 40],
            [50, 50, 50]
        ];
 
        const scores2 = [
            [0, 0, 0, 0, 0.0],
            [0, 0, 0, 0, 0.0],
            [0, 0, 0, 0, 0.0],
            [0, 0, 0, 0, 0.0],
            [0, 0, 0, 0, 0.0]
        ];
 
        // 처리
        for (let i=0; i<scores1.length; i++) {
            let sum = 0;
            let avg = 0.0;
            for (let j=0; j<scores1[i].length; j++) {
                scores2[i][j] = scores1[i][j];
                sum += scores1[i][j];
            }
            scores2[i][3] = sum;
            scores2[i][4] = sum / scores1[i].length;
        }
 
        console.log(scores2);
    </script>
    
</body>
</html>

'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글

[Javascript] 입력창에 검색어 입력 후 다음, 네이버, 구글에서 검색결과 보기 (0)	2024.04.26
[Javascript] 중복없는 로또번호 출력 (0)	2024.04.25
[Javascript] 구구단 테이블 만들기 (0)	2024.04.25
[Javascript] 캘린더(달력) 만들기 (0)	2024.04.25
[Javascript] 표 안에 별표 찍기 (0)	2024.04.19

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[Javascript] 국영수 총점과 평균 나타내는 표 만들기

'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글

'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<!-- 자바 책 151쪽 변형문제 -->
	<script type="text/javascript">
	let score = [
	[100, 100, 100],
	[20, 20, 20],
	[30, 30, 30],
	[40, 40, 40],
	[50, 50, 50]
	];

	let html = '<table border="1">';
	html += '<tr>';
	html += '<td>번호</td>';
	html += '<td>국어</td>';
	html += '<td>영어</td>';
	html += '<td>수학</td>';
	html += '<td>총점</td>';
	html += '<td>평균</td>';
	html += '</tr>';

	for (let row=1; row<=5; row++) {
	html += '<tr>';
	html += '<td align="center">' + row + '</td>';
	let sum = 0;
	for(let i=0; i<3; i++) {
	html += '<td>' + score[row-1][i] + '</td>';
	sum += score[row-1][i];
	}
	// 총점
	html += '<td>' + sum + '</td>';
	//평균
	html += '<td>' + sum / score[row-1].length + '</td>';

	html += '</tr>';
	}

	html += '<tr>';
	html += '<td>총점</td>';
	let koreasum = 0;
	for (let i=0; i<score.length; i++) {
	koreasum += score[i][0];
	}
	html += '<td>' + koreasum + '</td>';


	let englishsum = 0;
	for (let i=0; i<score.length; i++) {
	englishsum += score[i][0];
	}
	html += '<td>' + englishsum + '</td>';


	let mathsum = 0;
	for (let i=0; i<score.length; i++) {
	mathsum += score[i][0];
	}
	html += '<td>' + mathsum + '</td>';


	html += '<td></td>';
	html += '<td></td>';

	html += '</tr>';
	html += '</table>';

	document.write(html);
	</script>
	</body>
	</html>