HTML

概要

HTMLの表の行の上にマウスカーソルが重なると、非表示になっているセル内にある隠しデータを読み取り、画面内の別の箇所に表示します。

サンプルはこちら

コードのポイント

• マウスカーソルが表と重なるときのイベントはonmousemove属性を使用します。(cssのhoverやjQueryのmouseoverではありません)
• マウスカーソルが重なるのはtdやthになるのでparentでも良さそうですが、td内でpやinputなどを使っている場合にparentでは不具合を生じます。そのため祖先のタグを探すclosestメソッドを使いましょう。
• closestを使うときは「どのID要素から」という指定を忘れないように。なぜなら該当要素が重複する可能性があります。(divのdivのdivなど、入れ子になる可能性を考慮すること)

サンプルコード

HTML

  <div id="tableArea" onmousemove="mouseMove(event, 'tableArea', 'bookComment')">
    <table class="table table-bordered">
      <caption>表：書籍一覧</caption>
      <thead>
        <tr>
          <th>題名</th>
          <th>価格</th>
          <th class="secret">データ</th>
        </tr>
      </thead>
      <tbody>
        <tr id="001">
          <td>魚図鑑</td>
          <td>\25,000</td>
          <td id="001-Comment" class="secret">魚好きの小中学生におすすめ</td>
        </tr>
        <tr id="002">
          <td>機械の仕組み</td>
          <td>\7,000</td>
          <td id="002-Comment" class="secret">これで君も工学博士！</td>
        </tr>
        <tr id="003">
          <td>料理の基本</td>
          <td>\3,000</td>
          <td id="003-Comment" class="secret">自炊始めませんか？</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="commnetArea" class="well" style="max-width: 400px;">
    <h3>書籍の備考</h3>
    <p id="bookComment"></p>
  </div>

JavaScript

  function mouseMove(argEnv, tableAreaId, commentViewId) {
    let targetElement = (argEnv.srcElement || argEnv.target);

    let trElement = targetElement.closest("#" + tableAreaId + " table tbody tr");
    if (trElement) {
      let prefixId = trElement.id;
      let hiddenComment = document.getElementById(prefixId + "-Comment");
      document.getElementById(commentViewId).textContent = hiddenComment.textContent;
    }
  }

サンプルはこちら