マウスカーソルが当たっているtableのtdに大してハイライト表示を行うjavascriptです。
フォーカスしているtdはもちろんのこと、行（tr）や列に大してもハイライトします。今のところの問題点はIE6での動作が重いことです。IE6の場合は振り分けでスクリプトを無効にしたほうがよいかもしれません。
フォーカスしているtdはもちろんのこと、行（tr）や列に大してもハイライトします。今のところの問題点はIE6での動作が重いことです。IE6の場合は振り分けでスクリプトを無効にしたほうがよいかもしれません。
tableのセルをハイライト
■html
<table id="skd"> <tr class="day_time"> <th>日 付</th> <th colspan="2">08:00</th> <th colspan="2">09:00</th> <th colspan="2">10:00</th> ・ 省略 ・ <th colspan="2">20:00</th> <th colspan="2">21:00</th> <th colspan="2">22:00</th> </tr> <tr> <th>01日(月)</th> <td> </td> <td> </td> ・ 省略 ・ <td> </td> <td> </td> <td> </td> </tr> ・ 省略 ・ <tr class="sun"> <th>07日(日)</th> <td> </td> <td> </td> <td> </td> <td> </td> ・ 省略 ・ <td> </td> <td> </td> <td> </td> </tr> </table>
■javascript
$(function() {
//trごとのtdに番号を振ったclass(item1～)を指定
$("tr").each(function () {
$(this).children().not('th').each(function (i) {
i = i+1;
$(this).addClass("item" + i);
});
});
//関数colorを作成
$.fn.color = function() {
return this.each(function() {
$(this).css('background-color', '#eee');
});
};
//行の背景色変更
$("tr").mouseout(function() {
$(this).children().css('background-color', '');
});
//列の背景色変更
$("td").each(function() {
var selector = '.'+ $(this).attr('class');
$(this).hover(function(){
$(selector).color();
$(this).siblings().color();
//選択中のtdの背景色変更
$(this).css('background-color', '#ccc');
},function(){
$(selector).css('background-color', '');
$(this).parent().css('background-color', '');
});
});
});
解説
まずはtr毎のtdに対してクラス名「item ＋ 連番」をつけていきます。
なお今回thはハイライトしたくないので「not(‘th’)」で対象からはずします。
$("tr").each(function () {
$(this).children().not('th').each(function (i) {
i = i+1;
$(this).addClass("item" + i);
});
});
列や行に対して設定するハイライトカラーを関数にします。
関数にすることで結果敵にソースがシンプルになります。
$.fn.color = function() {
return this.each(function() {
$(this).css('background-color', '#eee');
});
};
↓以下はフォーカスが当たった行（tr）からマウスがはずれた際の設定です。
マウスが外れた際に「’background-color’, ”」とすることでデフォルトの背景色（今回でいうと白）に戻します。
これを入れないとマウスアウトしても行がハイライトしたままになってしまいます。
$("tr").mouseout(function() {
$(this).children().css('background-color', '');
});
そして以下が今回のスクリプトのコアな部分です。
まず、変数selectorに.class名を格納します。これは最初に設定したclass名「item ＋ 連番」を取得する為です。
そしてイベントハンドラhoverにより、「カーソルが当たった」class名を持つtdに先ほど作成した関数を実行します。class名は列に対応しており、例えば一番左のtdに対してカーソルを当てた場合はclass名「item1」を持つ全てのtdの背景に色がつきます。
「$(this).siblings().color();」は行に対して同様に背景色を設定しています。また、カーソルがピンポイントで当たっているtdに大しては、「$(this).css(‘background-color’, ‘#ccc’);」で直接背景色を設定します。
$("td").each(function() {
var selector = '.'+ $(this).attr('class');
$(this).hover(function(){
$(selector).color();
$(this).siblings().color();
//選択中のtdの背景色変更
$(this).css('background-color', '#ccc');
最後にマウスアウトした際の背景色をデフォルトの背景色に戻します。
},function(){
$(selector).css('background-color', '');
$(this).parent().css('background-color', '');
});
});