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:''
    });
  });