2022.2.8
投稿者: あたい js

テーブルセルをhoverして色を付ける時のテクニック

テーブルセルをhoverして色を付ける時のテクニックとして、

td:hover {
  background-color: #ff0000;
}

とかあると思うのですが、rowspanとかで結合してるときに使える時があるのがこれです。
使えない時もあるかもしれませんが、こういう風にやりたいときに有効です。

<table>
  <tbody>
    <tr>
      <td rowspan="3">Alphabet</td>
      <td rowspan="2">a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>f</td>
      <td>g</td>
      <td>h</td>
    </tr>
    <tr>
      <td rowspan="3">Number</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>
$("td").hover(function() { $el = $(this); $el.parent().addClass("hover");if ($el.parent().has('td[rowspan]').length == 0) $el .parent() .prevAll('tr:has(td[rowspan]):first') .find('td[rowspan]') .addClass("hover"); }, function() { $el .parent() .removeClass("hover") .prevAll('tr:has(td[rowspan]):first') .find('td[rowspan]') .removeClass("hover"); });
.hover { background: red; }