ねこきっくぱんちのメモ帳

ITに関することいろいろめも。たまにアニメ。

JavaScript002 掛算表を作成する

掛算表を作成する

f:id:neko_kick_panch:20170514123331p:plain

■コード

<style>
html,body,h1,h2,h3,p,ul,li,img {
  margin: 0;
  padding: 10px;
  line-height: 1.0;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
}
li {
  list-style: none;
}
table{ border-collapse: collapse; }
th{ background: #eea; }
th,td{
  text-align: center;
  width: 30px;
  height: 30px
}
</style>

<body>
<h1>9x9の一覧表をfor文を使って表示</h1>
<p>[一覧表]</p>
<table border="1">
<script>
var input=9;
document.write( '<tr>' );
document.write( '<th></th>' ); //左上1マス固定
for( var i = 1; i <= input; i++ ) { //1行目作成
  document.write( '<th>' + i + '</th>' );
}
document.write( '</tr>' );

//列と内容の作成
for( var i = 1; i <= input; i++ ) {
  document.write( '<tr>' );
  document.write( '<th>' + i + '</th>' );
    for( var j = 1; j <= input; j++ ) {
      document.write( '<td>' +i* j + '</td>' );
    }
  document.write( '</tr>' );
}
</script>
</table>

</body></html>