【応用編】ストライプテーブル

最新のブラウザでは急速にCSS3への対応が進んでいますが、
ブラウザの最大シェアを持っているIEには未対応であることが
普及を妨げているともいえます。
しかし、jQueryのフィルターを使えば、
IEにもCSS3の効果を適用できるのが魅力的なところです。
jQueryのメリットを最大限に生かして、
CSS3未対応のIEにも対応できるストライプテーブルを作りましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
//行と列のデザインを初期化
$(“th:nth-child(odd)”).addClass(“odd”);
$(“tr:nth-child(even)”).addClass(“even”);

//行のハイライト表示
 $(“tr:not(:first-child)”).mouseover(function(){
  $(this).addClass(“hover”);
 }).mouseout(function(){
  $(this).removeClass(“hover”);
 });

//列のハイライト表示
 $(“td”).mouseover(function(){
 $(“td:nth-child(” + ($(“td”).index(this)%$(“th”).size() + 1) + “)”)
   .addClass(“hover”); 
 }).mouseout(function(){
  $(“td:nth-child(” + ($(“td”).index(this)%$(“th”).size() + 1) + “)”)
   .removeClass(“hover”); 
 });
});
</script>

【CSS】(一部のみ抜粋)
<style type=”text/css”>
<!–
.even {
background-color: #EAEAEA;
}
.odd {
background-color: #AAAAAA;
}
.hover {
background-color: #B2D8FF;
cursor: default;
}
–>
</style>

【HTML】(一部のみ抜粋)
<table>
<tr>
<th>№</th><th>名前</th><th>統率</th>
<th>武勇</th><th>体力</th><th>知略</th><th>政治</th>
</tr>
<tr>
<td>1</td><td>織田信長</td><td>100</td>
<td>89</td><td>94</td><td>97</td><td>380</td>
</tr>
</table>

ストライプテーブルサンプル

This entry was written by admin , posted on 水曜日 6月 15 2011at 09:06 pm , filed under 応用例 and tagged , , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.