読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【javascript】document.writeを使わずに九九の計算表


前にdocument.writeを使って100 x 100の表を作りましたが今回はinnerHTMLで指定して作りました。html + javascript

<body>
<div id="btn">100 x 100</div>
<table id="table">
</table>
<p>
</p>
<script>
var btn = document.getElementById('btn')
btn.onclick = cl;

var table = document.getElementById('table');
var nums = '';
var i = 0;
var j = 0;
var k = 0;
function cl(){
for(var i = 1;i <= 100;i++){
  nums += '<th>' + i + '</th>';
}
var tr1 = document.createElement('tr')
tr1.innerHTML = '<tr><td></td>' + nums + '</tr>';
table.appendChild(tr1);
var trN = document.createElement('tr')
for(var j = 1;j <= 100;j++){
var trN = ''
var trN = document.createElement('tr')
trN.innerHTML += '<tr><th>' + j + '</th></tr>';
  for(var k = 1;k <= 100;k++){
    trN.innerHTML += '<td>' + j * k + '</td>';
  }
trN.innerHTML += '</tr>';
k = 0;
table.appendChild(trN);
}
nums ='';
btn.classList.add('dis');
}
</script>
</body>

css

table{
  background: linear-gradient(#ecacff, #f8ffac, #ace5ff, #acffc3, #f8ffac, #ffaba0);
  border-collapse:collapse;
}
td,th{
    width:20px;
    border:2px dotted #888;
    text-align:center;
}
#btn{
  text-align:center;
  width:120px;
  height:50px;
  line-height:50px;
  margin:50px auto;
  background:#f88;
  border-radius:50px;
  box-shadow:1px 4px #c66;
  cursor:pointer;
  color:#fff;
  font-weight:bold;
}
#btn:hover{
  background:#faa;
}
#btn:active{
  margin-top:52px;
  background:#faa;
  box-shadow:1px 2px #c66;
}
.dis{
  display:none;
}