九九表

眠気覚まし

by mahny

HTML

<table id="multiplication_table"></table>

CSS

#multiplication_table, th, td {
  border: solid 1px #000000;
}
th, td {
  column-width: 2.0em;
}
td {
  text-align: right;
}

JavaScript

const multiplicationLevel = 9;
const table = $('#multiplication_table');
{
  const tr = $('<tr />');
  tr.append('<th>＼</th>');
  for (let i = 1; i <= multiplicationLevel; i++) {
    tr.append('<th>' + i + '</th>');
	}
  table.append(tr);
}

for (let i = 1; i <= multiplicationLevel; i++) {
  const tr = $('<tr />');
  tr.append('<th>' + i + '</th>');
  for (let j = 1; j <= multiplicationLevel; j++) {
    tr.append('<td>' + (i * j) + '</td>')
  }
  table.append(tr);
}