質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

JQueryによるTableのハイライト処理

DigDigBottom
DigDigBottom

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

0クリップ

467閲覧

投稿2021/11/30 07:08

JQueryのhover()メソッドにより、Tableのセルにカーソルを置いた際、列・行をハイライトしたい

やや形が特殊なTabeleに対して、カーソルを置いた行・列をハイライトしたいです。

そのテーブルは以下のような形になります。
table
[採決種類]は2行分たてに結合、[採決日]は10列分結合してあります。

発生している問題・エラーメッセージ

困っているのは2点です…
1.ALT(クラス:standard_table_td)などの各項目にhoverした際、[苗字]さんの最後の列(麻生さん)もハイライトしてしまいます…。これをハイライトしなようにしたいです。
問題1

2.[苗字]さんをhoverするとハイライトが一つ前の列になってしまう。
画像だとカーソルは[阿部さん]に置いたので、阿部さん列をハイライトしたいのですが、山田さん列がハイライトしされます…。
問題2

該当のソースコード

ソースはteratalに上げれる程度に短縮しました。

html

<!DOCTYPE html> <html lang="ja"> <head> <mata charaset="UTF-8"> <title>tableのハイライト</title> <meta name="description" content=""> <link rel="stylesheet" href="css/style.css"> </head> <script type="text/javascript" src="css/jquery-3.5.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("td, .tbth").hover(function () { $(this).not('th').addClass('hover'); $(this).siblings().not('th').addClass('hover'); var index = $(this).index(); $(this).closest('table').find('tr').each(function () { if ($('td, th', this).length > 0) { $('td', this).eq(index).not('.standard_table_td').addClass('hover'); $('th', this).eq(index-1).not('.standard_table_th').addClass('hover'); $("span").text(index); } }); }, function () { $(this).removeClass('hover'); $(this).siblings().not('th').removeClass('hover'); var index = $(this).index(); $(this).closest('table').find('tr').each(function () { if ($('td, th', this).length > 0) { $('td', this).eq(index).not('.standard_table_td').removeClass('hover'); $('th', this).eq(index-1).not('.standard_table_th').removeClass('hover'); } }); }); }); </script> <body> <table class="standard_table"> <thead></thead> <tbody> <tr> <th class="standard_table_th" rowspan="2">採決種類</th> <th class="standard_table_th" colspan="5">採決日</th> </tr> <tr> <th valign="top" class="tbth"><div class="tate"><span>田中さん</span></div></th> <th valign="top" class="tbth"><div class="tate"><span>佐藤さん</span></div></th> <th valign="top" class="tbth"><div class="tate"><span>鈴木さん</span></div></th> <th valign="top" class="tbth"><div class="tate"><span>山田さん</span></div></th> <th valign="top" class="tbth"><div class="tate"><span>阿部さん</span></div></th> <th valign="top" class="tbth"><div class="tate"><span>麻生さん</span></div></th> </tr> <tr> <td class="standard_table_td"><span class="break">ALT</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> </tr> <tr> <td class="standard_table_td"><span class="break">γ-GTP</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> </tr> <tr> <td class="standard_table_td"><span class="break">蛋白質</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> </tr> <tr> <td class="standard_table_td"><span class="break">アルブミン</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> </tr> <tr> <td class="standard_table_td"><span class="break">アルブミン対グロブリン比</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> </tr> <tr> <td class="standard_table_td"><span class="break">コレステロール</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> </tr> <tr> <td class="standard_table_td"><span class="break">グリコアルブミン</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> <td class="cell"><span>数値</span></td> </tr> </tr> </tbody> </table> </body> </html>

css

.standard_table { border: solid 1px #999999; } .standard_table_th { background-color: #999999; } .standard_table_td { background-color: #ffffff; } .tate { writing-mode: tb-rl; display: block; white-space: nowrap; } .tbth { background-color: #cccccc; word-wrap:break-word; direction:ltr; } .cell { background-color: #91B5F2; word-break:break-all; word-wrap:break-word; } /* hover()メソッドのハイライト処理*/ td.hover, th.hover{ background-color:#FFF980; }

試したこと

問題の1,2は恐らく、[採決種類][採決日]のカラムにより、[苗字]さんのindexがずれてることが原因かと思います。
縦のハイライトは

jQuery箇所

var index = $(this).index(); $(this).closest('table').find('tr').each(function () { if ($('td, th', this).length > 0) { $('td', this).eq(index).not('.standard_table_td').addClass('hover'); $('th', this).eq(index-1).not('.standard_table_th').addClass('hover'); } });

この箇所でindexを使い実装してますが、index-1したりと無理くりやってます。
別のメソッドやご指摘とうございましたら、ご教授頂けると幸いです。

補足情報(FW/ツールのバージョンなど)

参考元のソースはこちらです
マウスオーバーで行列をハイライト

ブラウザはChromeです。
よろしくお願いいたします

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。