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

Facebook にシェア
Pocket

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

HTML

CSS

名前 ふりがな 年齢
中居正広 なかいまさひろ 39
木村拓哉 きむらたくや 39
稲垣吾郎 いながきごろう 38

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

HTML

CSS

名前 年齢 生年月日 血液型
ふりがな 出生地 愛称
中居正広 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タグをつけなかったら、テーブルのヘッダー部分まで色が変わってしまうので注意しましょう。

テーブルを複数行ごとにhoverでハイライトする方法” への2件のコメント

  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’);
    });
    });
    });

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

コメントを残す

メールアドレスが公開されることはありません。