表にカーソルを合わせると色がつくものを作った

動作サンプル

<table id="myTable" border="1">
<tr>
  <td class="r0 c0">0-0</td>
  <td class="r0 c1">0-1</td>
  <td class="r0 c2">0-2</td>
  <td class="r0 c3">0-3</td>
</tr>

<tr>
  <td class="r1 c0">1-0</td>
  <td class="r1 c1">1-1</td>
  <td class="r1 c2">1-2</td>
  <td class="r1 c3">1-3</td>
</tr>

<tr>
  <td class="r2 c0">2-0</td>
  <td class="r2 c1">2-1</td>
  <td class="r2 c2">2-2</td>
  <td class="r2 c3">2-3</td>
</tr>

<tr>
  <td class="r3 c0">3-0</td>
  <td class="r3 c1">3-1</td>
  <td class="r3 c2">3-2</td>
  <td class="r3 c3">3-3</td>
</tr>
</table>

<script src="https://shunshun94.github.io/shared/other/io/github/shunshun94/util/table.js"></script>

io.github.shunshun94.util.table.activateHover(document.getElementById('myTable'));

やっていることは以下の通り。なのでクラスを各 td/th に設定しないと無意味なのは注意。

1. カーソルを合わせた td / th 要素の class 一覧を取得する
2. 同じクラスを持つ同じ table 要素以下の td/th 要素に active クラスを追加する
3. active クラスの装飾が td / th に反映される