아래와 같은 구구단 테이블(표)을 만들어보자
<!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">
let html = '<table border="1" width="800">';
for(let row=0; row<=9;row++) {
html += '<tr>';
for(let col=0; col<=9; col++) {
if(row == 0 && col == 0) {
html+='<td></td>';
} else if (col == 0) {
html+='<td align="center">' + row + '단 </td>';
} else if (row == 0) {
html+='<td align="center">X' + col + '</td>';
} else {
html+='<td align="center">' + row + 'X' + col + '=' + (row*col) + '</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">
document.write('<table border="1">');
document.write('<tr>')
for(let col=1; col<=3; col++) {
document.write('<td>');
gugudan(col);
gugudan(col+3);
gugudan(col+6);
document.write('</td>');
}
document.write('</tr>')
document.write('</table>');
function gugudan(num) {
document.write('<table border="1">');
for(let row=1; row<=9; row++) {
document.write('<tr>')
document.write('<td align="center">'+ num + ' X ' + row + ' = ' + num*row + '</td>');
document.write('</tr>');
}
document.write('</table>');
}
</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 |
