テーブルを複数行ごとにhoverでハイライトする方法

今の会社に入って数か月たったころ、前任者が作ったホームページのソースが分かりづらいので、新しく作り直したいという依頼を受けることになった。そのうちのいくつかのページにテーブルがあり、trごとにハイライトしているページが。どうやらJavaScriptでやっているようだったのだけれども、それを自分はCSSに書き換え。例えば以下のような感じで。

HTML

<table class="trhover">
<tr><th>名前</th><th>ふりがな</th><th>年齢</th></tr>
<tr><td>中居正広</td><td>なかいまさひろ</td><td>39</td></tr>
<tr><td>木村拓哉</td><td>きむらたくや</td><td>39</td></tr>
<tr><td>稲垣吾郎</td><td>いながきごろう</td><td>38</td></tr>
</table>

CSS

table.trhover tr:hover{
	background-color:yellow;
}
名前 ふりがな 年齢
中居正広 なかいまさひろ 39
木村拓哉 きむらたくや 39
稲垣吾郎 いながきごろう 38

しかし中には、データ数が多すぎて1セットで複数行になっているテーブルも。ソースを見てみると、どうやらtrタグの中に一つのtdタグを入れ、その中に新たにtableを入れてハイライトをつけているようだった。自分もそのやり方でいいのかと思ったら、これだと線の場所がバラバラことがあるといった問題らしいので、すべてを一つのテーブルで作ることに。いったいどうすりゃいいものか・・・。と少し考えて作ったのが下のようなもの。

HTML

<table class="tbodyhover">
<thead>
	<tr><th>名前</th><th rowspan="2">年齢</th><th>生年月日</th><th>血液型</th></tr>
	<tr><th>ふりがな</th><th>出生地</th><th>愛称</th></tr>
</thead>
<tbody>
	<tr><td>中居正広</td><td rowspan="2">39</td><td>1972年8月18日</td><td>A型</td></tr>
	<tr><td>なかいまさひろ</td><td>神奈川県藤沢市</td><td>中居くん</td></tr>
</tbody>
<tbody>
	<tr><td>木村拓哉</td><td rowspan="2">39</td><td>1972年11月13日</td><td>O型</td></tr>
	<tr><td>きむらたくや</td><td>東京都</td><td>キムタク</td></tr>
</tbody>
<tbody>
	<tr><td>稲垣吾郎</td><td rowspan="2">38</td><td>1973年12月8日</td><td>O型</td></tr>
	<tr><td>いながきごろう</td><td>東京都板橋区</td><td>ゴローちゃん</td></tr>
</tbody>
</table>

CSS

table.tbodyhover tbody:hover{
	background-color:yellow;
}
名前 年齢 生年月日 血液型
ふりがな 出生地 愛称
中居正広 39 1972年8月18日 A型
なかいまさひろ 神奈川県藤沢市 中居くん
木村拓哉 39 1972年11月13日 O型
きむらたくや 東京都 キムタク
稲垣吾郎 38 1973年12月8日 O型
いながきごろう 東京都板橋区 ゴローちゃん

HTMLのテーブルにはヘッダーに該当する<thead>、フッターに該当する<tfoot>、そしてボディに該当する<tbody>の3つで構成されています。また、theadとtfootは同じテーブル内に一つしか記述してはいけないのですが、tbodyはいくつでも記述してもよいことになってるそうです。そのため、複数行をtbodyでまとめ、tbody上にマウスが乗ったらバックの色を変えるという処理をしてみました。なお、上記のタグを書かないと、tbodyと判断されます。そのため、theadタグをつけなかったら、テーブルのヘッダー部分まで色が変わってしまうので注意しましょう。

コメント

  1. ひととせ より:

    初めまして。
    ソートを使用しているので、tbodyで囲めません。

    2行のrowspanならcssセレクタの「+」を使用できますが、
    4行の場合はどう対応すればいいのでしょうか。

    2行、3行、4行とtbodyに複数回rowspanが含まれている場合はどうなのでしょうか。

    (サンプル)
    //*html*//

    ID
    会社名
    メール
    会員番号
    ID
    xxx
    日付
    契約

    1234556
    XXXXXXX株式会社
    xxxxxxxxxxxxxxxx
    vvvvvvvvvvvvv
    1111111111111122222222222
    330
    2018/01/01
    ご契約中

    1234556
    XXXXXXX株式会社
    xxxxxxxxxxxxxxxx
    vvvvvvvvvvvvv
    1111111111111122222222222
    330
    2018/01/01
    ご契約中

    XXXXXXX株式会社
    xxxxxxxxxxxxxxxx
    11111111111111
    40
     
    お手続き中

    XXXXXXX株式会社
    xxxxxxxxxxxxxxxx
    11111111111111
    40
     
    お手続き中

    XXXXXXX株式会社
    xxxxxxxxxxxxxxxx
    11111111111111
    40
     
    お手続き中

    123456
    XXXXXXX株式会社
    xxxxxxxxxxxxxxxx
    vvvvvvvvvvvvv
    1111111111111122222222222
    330
    2018/01/01
    ご契約中

    xxxxxxxxxxxxxxxx
    vvvvvvvvvvvvv
    1111111111111122222222222
    330
    2018/01/01
    ご契約中

    1234556
    XXXXXXX株式会社
    xxxxxxxxxxxxxxxx
    vvvvvvvvvvvvv
    1111111111111122222222222
    330
    2018/01/01
    ご契約中

    //*java*//

    //行リンク//
    jQuery( function($) {
    $(‘tbody tr[data-href]’).addClass(‘clickable’).click( function() {
    window.location = $(this).attr(‘data-href’);
    }).find(‘a’).hover( function() {
    $(this).parents(‘tr’).unbind(‘click’);
    }, function() {
    $(this).parents(‘tr’).click( function() {
    window.location = $(this).attr(‘data-href’);
    });
    });
    });

    • amyu より:

      コメントにHTMLを書いてもらったと思うのですが、うまく反映できてないっぽいのでよく分からないですが、
      そこまで複雑だとCSSで対応するのは難しいんじゃないのかと思います。
      兄弟要素の+を使ってもできないと思います(自分の要素も前後の要素もhover時にスタイルを適用するというのは難しそう)。

タイトルとURLをコピーしました