JavaScriptで作る九九表 - ウェブ学のすすめ

プレビュー

↓PC版

JavaScriptで作る九九表 - jsdo.it - share JavaScript, HTML5 and CSS

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>九九の対数表</title>
<style>
table {
    border-collapse: collapse;
}

td,th {
    width: 50px;
    border: 1px solid #000;
}

td {
    text-align: center;
}

th {
    background-color: #ccc;
}
</style>
</head>
<body>
<h3>九九の対数表</h3>
<script type="text/javascript">
var col; //行
var row; //列

document.write('<table>');

for(row=0 ; row<=9 ; row++){
    document.write('<tr>');
    for(col=0; col<=9; col++){
	if( col===0 && row===0){
	    document.write('<th>&nbsp;<\/th>'); //一番左上のセル生成
	}
	else if(col===0 && row!==0){ //行見出し生成（一番左上のセルを除く）
	    document.write('<th>'+row+'<\/th>');
	}
	else if(row===0){
	    document.write('<th>'+col+'<\/th>'); //列見出し生成（一番左上のセルを除く）
	}
	else{
	    document.write('<td>'+col*row+'<\/td>'); //その他のセル（行×列）
	}
    }
    document.write('<\/tr>');
}
document.write('<\/table>');
</script>
</body>
</html>