Q&A
yambejp様
ご回答ありがとうございます。
一応、対象にはそれぞれクラスが設定してあるのですが、
カスタムデータは未設定でしたので、新たな知見を頂きましてありがとうございます。
調べたところ、カスタムデータでデータを格納してJavaScriptで取得するのは相性がいい？ようですね。
https://qiita.com/k152744/items/c96fcf0141798bf48dd7
不勉強でしりませんでした。
ありがとうございました。
JQueryのhover()メソッドにより、Tableのセルにカーソルを置いた際、列・行をハイライトしたい
やや形が特殊なTabeleに対して、カーソルを置いた行・列をハイライトしたいです。
そのテーブルは以下のような形になります。
[採決種類]は2行分たてに結合、[採決日]は10列分結合してあります。
発生している問題・エラーメッセージ
困っているのは2点です…
1.ALT（クラス：standard_table_td）などの各項目にhoverした際、[苗字]さんの最後の列（麻生さん）もハイライトしてしまいます…。これをハイライトしなようにしたいです。
2.[苗字]さんをhoverするとハイライトが一つ前の列になってしまう。
画像だとカーソルは[阿部さん]に置いたので、阿部さん列をハイライトしたいのですが、山田さん列がハイライトしされます…。
該当のソースコード
ソースはteratalに上げれる程度に短縮しました。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <mata charaset="UTF-8"> 5 <title>tableのハイライト</title> 6 <meta name="description" content=""> 7 <link rel="stylesheet" href="css/style.css"> 8 </head> 9 <script type="text/javascript" src="css/jquery-3.5.1.min.js"></script> 10 <script type="text/javascript"> 11 $(document).ready(function () { 12 $("td, .tbth").hover(function () { 13 $(this).not('th').addClass('hover'); 14 $(this).siblings().not('th').addClass('hover'); 15 var index = $(this).index(); 16 $(this).closest('table').find('tr').each(function () { 17 if ($('td, th', this).length > 0) { 18 $('td', this).eq(index).not('.standard_table_td').addClass('hover'); 19 $('th', this).eq(index-1).not('.standard_table_th').addClass('hover'); 20 $("span").text(index); 21 } 22 }); 23 }, function () { 24 $(this).removeClass('hover'); 25 $(this).siblings().not('th').removeClass('hover'); 26 var index = $(this).index(); 27 $(this).closest('table').find('tr').each(function () { 28 if ($('td, th', this).length > 0) { 29 $('td', this).eq(index).not('.standard_table_td').removeClass('hover'); 30 $('th', this).eq(index-1).not('.standard_table_th').removeClass('hover'); 31 } 32 }); 33 }); 34 }); 35 </script> 36 <body> 37 <table class="standard_table"> 38 <thead></thead> 39 <tbody> 40 <tr> 41 <th class="standard_table_th" rowspan="2">採決種類</th> 42 <th class="standard_table_th" colspan="5">採決日</th> 43 </tr> 44 <tr> 45 <th valign="top" class="tbth"><div class="tate"><span>田中さん</span></div></th> 46 <th valign="top" class="tbth"><div class="tate"><span>佐藤さん</span></div></th> 47 <th valign="top" class="tbth"><div class="tate"><span>鈴木さん</span></div></th> 48 <th valign="top" class="tbth"><div class="tate"><span>山田さん</span></div></th> 49 <th valign="top" class="tbth"><div class="tate"><span>阿部さん</span></div></th> 50 <th valign="top" class="tbth"><div class="tate"><span>麻生さん</span></div></th> 51 </tr> 52 <tr> 53 <td class="standard_table_td"><span class="break">ALT</span></td> 54 <td class="cell"><span>数値</span></td> 55 <td class="cell"><span>数値</span></td> 56 <td class="cell"><span>数値</span></td> 57 <td class="cell"><span>数値</span></td> 58 <td class="cell"><span>数値</span></td> 59 <td class="cell"><span>数値</span></td> 60 </tr> 61 <tr> 62 <td class="standard_table_td"><span class="break">γ-GTP</span></td> 63 <td class="cell"><span>数値</span></td> 64 <td class="cell"><span>数値</span></td> 65 <td class="cell"><span>数値</span></td> 66 <td class="cell"><span>数値</span></td> 67 <td class="cell"><span>数値</span></td> 68 <td class="cell"><span>数値</span></td> 69 </tr> 70 <tr> 71 <td class="standard_table_td"><span class="break">蛋白質</span></td> 72 <td class="cell"><span>数値</span></td> 73 <td class="cell"><span>数値</span></td> 74 <td class="cell"><span>数値</span></td> 75 <td class="cell"><span>数値</span></td> 76 <td class="cell"><span>数値</span></td> 77 <td class="cell"><span>数値</span></td> 78 </tr> 79 <tr> 80 <td class="standard_table_td"><span class="break">アルブミン</span></td> 81 <td class="cell"><span>数値</span></td> 82 <td class="cell"><span>数値</span></td> 83 <td class="cell"><span>数値</span></td> 84 <td class="cell"><span>数値</span></td> 85 <td class="cell"><span>数値</span></td> 86 <td class="cell"><span>数値</span></td> 87 </tr> 88 <tr> 89 <td class="standard_table_td"><span class="break">アルブミン対グロブリン比</span></td> 90 <td class="cell"><span>数値</span></td> 91 <td class="cell"><span>数値</span></td> 92 <td class="cell"><span>数値</span></td> 93 <td class="cell"><span>数値</span></td> 94 <td class="cell"><span>数値</span></td> 95 <td class="cell"><span>数値</span></td> 96 </tr> 97 <tr> 98 <td class="standard_table_td"><span class="break">コレステロール</span></td> 99 <td class="cell"><span>数値</span></td> 100 <td class="cell"><span>数値</span></td> 101 <td class="cell"><span>数値</span></td> 102 <td class="cell"><span>数値</span></td> 103 <td class="cell"><span>数値</span></td> 104 <td class="cell"><span>数値</span></td> 105 </tr> 106 <tr> 107 <td class="standard_table_td"><span class="break">グリコアルブミン</span></td> 108 <td class="cell"><span>数値</span></td> 109 <td class="cell"><span>数値</span></td> 110 <td class="cell"><span>数値</span></td> 111 <td class="cell"><span>数値</span></td> 112 <td class="cell"><span>数値</span></td> 113 <td class="cell"><span>数値</span></td> 114 </tr> 115 </tr> 116 </tbody> 117 </table> 118 </body> 119</html>
css
1.standard_table { 2 border: solid 1px #999999; 3} 4.standard_table_th { 5 background-color: #999999; 6} 7.standard_table_td { 8 background-color: #ffffff; 9 10} 11.tate { 12 writing-mode: tb-rl; 13 display: block; 14 white-space: nowrap; 15} 16 .tbth 17{ 18 background-color: #cccccc; 19 word-wrap:break-word; 20 direction:ltr; 21} 22.cell 23{ 24 background-color: #91B5F2; 25 word-break:break-all; 26 word-wrap:break-word; 27} 28 29/* hover()メソッドのハイライト処理*/ 30td.hover, th.hover{ 31background-color:#FFF980; 32}
試したこと
問題の1,2は恐らく、[採決種類][採決日]のカラムにより、[苗字]さんのindexがずれてることが原因かと思います。
縦のハイライトは
jQuery箇所
1var index = $(this).index(); 2 $(this).closest('table').find('tr').each(function () { 3 if ($('td, th', this).length > 0) { 4 $('td', this).eq(index).not('.standard_table_td').addClass('hover'); 5 $('th', this).eq(index-1).not('.standard_table_th').addClass('hover'); 6 } 7 });
この箇所でindexを使い実装してますが、index-1したりと無理くりやってます。
別のメソッドやご指摘とうございましたら、ご教授頂けると幸いです。
補足情報（FW/ツールのバージョンなど）
参考元のソースはこちらです
マウスオーバーで行列をハイライト
ブラウザはChromeです。
よろしくお願いいたします
回答2件
0
ベストアンサー
下記でどうでしょう。
※印の3行追加しました。
js
1$(document).ready(function () { 2 $("td, .tbth").hover(function () { 3 $(this).not('th').addClass('hover'); 4 $(this).siblings().not('th').addClass('hover'); 5 var index = $(this).index(); 6 if($(this).prop("tagName") === "TH"){++index} // ※ 7 if(index === 0){return} // ※ 8 $(this).closest('table').find('tr').each(function () { 9 if ($('td, th', this).length > 0) { 10 $('td', this).eq(index).not('.standard_table_td').addClass('hover'); 11 $('th', this).eq(index - 1).not('.standard_table_th').addClass('hover'); 12 13 } 14 }); 15 }, function () { 16 $(this).removeClass('hover'); 17 $(this).siblings().not('th').removeClass('hover'); 18 var index = $(this).index(); 19 if($(this).prop("tagName") === "TH"){++index} // ※ 20 $(this).closest('table').find('tr').each(function () { 21 if ($('td, th', this).length > 0) { 22 $('td', this).eq(index).not('.standard_table_td').removeClass('hover'); 23 $('th', this).eq(index - 1).not('.standard_table_th').removeClass('hover'); 24 } 25 }); 26 }); 27});
投稿2021/11/30 07:49
編集2021/11/30 07:51
総合スコア34075
0
結合セルがある前提なら、対象をクラス指定するかカスタムデータを設定しておいてください
css
どこまで背景色を設定したいかにもよりますが適当でよいならこんな感じでも
CSS
1tr:hover .cell{ 2 background-Color:yellow; 3} 4table{ 5 overflow: hidden; 6} 7td{ 8 position: relative; 9} 10.cell:hover{ 11 background-Color:lime !important; 12} 13.cell:hover:after { 14 content: ""; 15 background-color: yellow; 16 width: 100%; 17 height: 200vh; 18 position: absolute; 19 top: -100vh; 20 left: 0; 21 z-index:-1; 22}
投稿2021/11/30 07:11
編集2021/11/30 08:57
総合スコア116724
yambejp様
CSSでに実装の仕方も頂きまして、ありがとうございます！
頂いたコードを移植し、拝見させていただきました。
交点がlime色になるのもわかりやすくて良いですね。
今回はJQueryでの実装ですが、CSSで色を塗る仕方も勉強になりました。
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/30 08:37 編集