ちょっと高機能な掛け算九九表

jQueryを使って、最終的には下記のようなハイライト機能を持ったかけ算九九表を作ります。

---

デモ

• デモ: https://sutara79.github.io/demo-kuku/
• ソースコード: https://github.com/sutara79/demo-kuku

---

基本

for文を入れ子にして行と列を作ります。
jQueryを使っているのでお手軽です。

let table = $('<table>').appendTo('body');
let row, col;
for (row = 1; row < 10; row++) {
  let tr = $('<tr>').appendTo(table);
  for (col = 1; col < 10; col++) {
    $('<td>').text(row * col).appendTo(tr);
  }
}

---

見出しをつける

計算結果の表だけでなく、行と列にそれぞれ見出しをつけます。
まず、for文の初期値を1から0へ変更し、見出しを置く余地を作ります。
そして、前章では<td>タグを置くだけだった箇所に分岐を設けて、行と列の始まりでは<th>タグで見出しを置くようにします。

if (row === 0 && col === 0) {
  // 縦と横の見出しが交差するセル
  $('<th>').text('×').appendTo(tr);
}
else if (row === 0) {
  // 横軸の見出し
  $('<th>').text(col).appendTo(tr);
}
else if (col === 0) {
  // 縦軸の見出し
  $('<th>').text(row).appendTo(tr);
}
else {
  // かけ算の結果
  $('<td>').text(row * col).appendTo(tr);
}

---

行・列数を柔軟に

行・列数をハードコーディングせず、引数で渡すようにします。
ES2015は初期値を設定できるので便利ですね。

/**
 * 行・列数が自由な九九表
 * @param {number} [orig_row=9] - 九九表の行数
 * @param {number} [orig_col=9] - 九九表の列数
 */
function kukuFlexible(orig_row = 9, orig_col = 9) {

---

ハイライト機能

最後に、冒頭に挙げたハイライト機能を追加します。
以下のような処理を行っています。

1. <td>でマウスオーバーを検知する。
2. その<td>が属する<tr>のインデックスを取得する。(縦の座標)
3. (2)の<tr>内での<td>のインデックスを取得する。(横の座標)
4. 座標を元に行と列をハイライトする。
5. マウスオーバーしている<td>は別のCSSクラスでハイライトする。