아래와 같은 표를 만들자
<!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 |
