マウスオーバーで行列をハイライト

マウスオーバーで表の行列をハイライトさせます。

サンプル

	見出し	見出し	見出し
見出し	テキスト	テキスト	テキスト
見出し	テキスト	テキスト	テキスト
見出し	テキスト	テキスト	テキスト
見出し	テキスト	テキスト	テキスト

HTML

コンテンツにth要素が含まれていますが、td要素のみの構成にも対応しています。

<table border="1" class="sample"> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <th>見出し</th> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th>見出し</th> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th>見出し</th> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <th>見出し</th> <td>テキスト</td> <td>テキスト</td> </tr> </table>

JavaScript

マウスオーバーでclass名hoverを付け、マウスアウトで外します。

$(document).ready(function() { $("table.sample td, table.sample th").hover(function() { $(this).not('th').addClass('hover'); $(this).siblings().not('th').addClass('hover'); var index = $(this).index(); $(this).closest('table').find('tr').each(function() { if($('td, th', this).size() > 0) { $('td, th', this).eq(index).not('th').addClass('hover'); } }); }, function() { $(this).removeClass('hover'); $(this).siblings().not('th').removeClass('hover'); var index = $(this).index(); $(this).closest('table').find('tr').each(function() { if($('td, th', this).size() > 0) { $('td, th', this).eq(index).not('th').removeClass('hover'); } }); }); });

CSS

table.sample td.hover { background-color:#000; color:#fff; }