jquery/table.crosshover - the jQuery plugin, CSS for hovered columns and rows

table.crosshover(jquery.crosshover)は、表(table要素)の同じ列または行のセル(th要素td要素)にポインタがあるときに適用するCSSのルールを指定できるjQueryのプラグインです。

ポインタのあるセル自身や、ポインタのあるセルと同じ列および行のセルの色を変えて強調したい場合などに使用することができます。

上の表のtable要素にはid属性としてsample1が指定されています。この表にtable.crosshoverを適用するため、次のJavaScriptを記述しています。

$( '#sample1' ).crosshover(
'th:column-hover, th:row-hover { background-color: #bbb; }',
'td:column-hover, td:row-hover { background-color: #eee; }',
'th:column-hover:row-hover { background-color: #777; color: #fff; }',
'td:column-hover:row-hover { background-color: #999; color: #fff; }'
);

crosshoverの引数には、このようにCSSのルールを1つずつ指定しますが、次のようにルールの入った配列を指定しても構いません。状況に応じて使いやすい方式を選ぶことができます。

a = [
'th:column-hover, th:row-hover { background-color: #bbb; }',
'td:column-hover, td:row-hover { background-color: #eee; }',
'th:column-hover:row-hover { background-color: #777; color: #fff; }',
'td:column-hover:row-hover { background-color: #999; color: #fff; }'
];
$( '#sample1' ).crosshover( a );

crosshoverに指定するルールのセレクタには、擬似的な擬似クラス(以降、擬似・擬似クラス):column-hoverおよび:row-hoverを使用することができます。

:column-hover擬似・擬似クラスは、ポインタのある(:hover擬似クラスに一致する)セルと同じ列のセルに、:row-hover擬似・擬似クラスは、同じくポインタのあるセルと同じ行のセルに一致します。

ポインタのあるセル自身はどちらの擬似・擬似クラスにも一致し、(上記の第3・第4引数のように)両方の擬似・擬似クラスを記述するとポインタのあるセルのみが一致します。これは:hover擬似クラスを記述した場合と同じになります。ただし、同擬似クラスがa要素にしか有効とならないMicrosoft Internet Explorer(バージョン6までのいわゆる「IE」)を除きます(逆にいえば、table.crosshoverを使用すると、同ブラウザでth:hoverやtd:hoverが実現できます)。

また、table.crosshoverの擬似・擬似クラスの一致対象は、colspan属性やrowspan属性の指定による結合セルにも対応しています(複雑な組み合わせには対応していない場合があります)。

結合セルの場合に一致するのは、結合セルを分割してみたときの、いずれかのセルと位置する列または行が同じセルです。

以上、2つの擬似・擬似クラスの一致対象についてまとめると以下のとおりです。

擬似・擬似クラス一致対象
:column-hover

同じ表の中で、ポインタのある(:hover擬似クラスに一致する)セルと同じ列(垂直位置)のセルに一致します。ポインタのあるセル自身にも一致します。

ポインタのあるセルが(colspan属性により)水平方向に結合されている場合は、それらすべての列のセルに一致します。

:row-hover

同じ表の中で、ポインタのある(:hover擬似クラスに一致する)セルと同じ行(水平位置)のセルに一致します。ポインタのあるセル自身にも一致します。

ポインタのあるセルが(rowspan属性により)垂直方向に結合されている場合は、それらすべての行のセルに一致します。

table.crosshoverを適用したtable要素には、crosshoverクラスが設定されます。これをポインタの位置に関係のないルールの指定や、JavaScriptでのアクセスに利用することができます。

また、table.crosshoverの対象のtable要素の中に、効果を適用しないセルを設けることができます。無効にしたいセルには、crosshover-disabledクラスを指定します。

<td class="crosshover-disabled">無効にしたいセル</td>

親要素であるtrcrosshover-disabledクラスを指定すると、その行のすべてのセルに同クラスを指定したことと等価になります。さらにその親要素であるtbodyなどに指定した場合も