連動テーブルのクロスハイライト

お世話になります。

http://kachibito.net/web-design/table-cell-highl …
こちらで紹介されているようなテーブルのクロスハイライトを行いたいのですが
同じセル数の複数テーブルでハイライトを連動させたいと考えています。

上記サイトのスクリプトですと複数テーブル設置した場合、縦のハイライトは連動するのですが
横方向は連動しません、良い方法はありますでしょうか？

よろしくお願いします。

No.3 ベストアンサー 回答者： DoubtOwl 回答日時： 2014/10/14 13:49

-- javascript

$(function(){
var overcells = $("table td"),
overrows = $("table tr"),
hoverClass = "hover",
current_r,
current_c,
rowIndex;

overcells.hover(
function(){
var $this = $(this);
(current_r = $this.parent().children("table td"));
rowIndex = $this.parent().parent().children("table tr").index($this.parent());
(overrows.filter(":nth-child("+ (rowIndex + 1) +")")).addClass(hoverClass);
//$("#a").text(rowIndex + 1);
(current_c = overcells.filter(":nth-child("+ (current_r.index($this)+2) +")")).addClass(hoverClass);
},

function(){
(overrows.filter(":nth-child("+ (rowIndex + 1) +")")).removeClass(hoverClass);
current_c.removeClass(hoverClass);
}
);
});

-- css

table td.hover {background:#cffbfb;}
table td.hover:hover {background:#84f4f4;}
table tr.hover {background:#cffbfb;}

こんな感じで。
クロスする部分の色は切り替えていませんが。
色が濃くなっている箇所はクロスしているかどうかではなく、
オンカーソル（td.hover:hover）で判定しているようです。

この回答へのお礼

思い描いていた通りの動作が実現しました、本当に有難うございます！
感謝感激です！

お礼日時：2014/10/14 16:55

No.2 回答者： Taiyonoshizuku 回答日時： 2014/10/14 12:44

>上記サイトのスクリプトですと複数テーブル設置した場合、縦のハイライトは連動するのですが

>横方向は連動しません、良い方法はありますでしょうか？

サンプルスクリプトをカスタマイズすればいいと思う。

current_rが横のラインなので
hoverとなったtdのtrを取得して、連動させたいテーブルの同じtr行にaddClass(hoverClass)をすればいいよ。

この回答へのお礼

回答ありがとうございます。

Javascriptは詳しくなく、ヒントだけでも助かりました。

お礼日時：2014/10/14 16:54

No.1 回答者： Taiyonoshizuku 回答日時： 2014/10/13 16:00

複数のテーブルで連動で縦は連動するってことは縦に並べたってこと？

それだと横に連動したら変なことになると思うけど。

この回答へのお礼

回答ありがとうございます。
テーブルは縦にも横にも並びます。
http://imgs.link/iywwXG.jpg
この様な状態です。
希望の動作としては表１で列D行4がハイライトされている時は
表２・３・４でも同じ様に列D行4をハイライトさせたいです。
（D4の各数値の確認を容易にしたい為）

お礼日時：2014/10/13 16:35