tableでマウスhoverしている列の背景色を変える。
「日本百選:都道府県別件数」で、tableでマウスhoverがしているセルの行と列の背景色を変えるようにしてみました。
行はCSSのtr:hoverで色を変えて、列はJavaScriptで色を変えています。
http://ok2nd.sakura.ne.jp/abook/pc/list-hyakusen-sum.php
JavaScriptは、以下のサイトを参考にカスタマイズしました。
≪jQuery:tableでマウスのhoverしている行と列の色を同時に変える方法≫
http://h2ham.seesaa.net/article/114152042.html
$("#sum_list tr").each(function () { $(this).children().each(function (i) { i = i+1; $(this).addClass("item" + i); }); }); $.fn.color = function(){ return this.each(function(){ $(this).css({ backgroundColor:'#ffced6' }); }); }; $('#sum_list tr td').each(function(){ var bgColor = $(this).css('backgroundColor'); var selector = '.'+ $(this).attr('class'); $(this).hover(function(){ $(selector).color(); },function(){ $(selector).css({ backgroundColor:'' }); }); }); $('#sum_list thead tr th').each(function(){ var bgColor = $(this).css('backgroundColor'); var selector = '.'+ $(this).attr('class'); $(this).hover(function(){ $(selector).color(); },function(){ $(selector).css({ backgroundColor:'' }); });