2009年11月25日
jQueryでストライプの装飾 :nth-child()
jQueryでテーブルにストライプで装飾するチュートリアルを試してみました。
jQueryで動的に装飾するので、後からデータを追加・削除してもcssやhtmlをいじる必要がまったく無いのが利点です。
キーとなるフィルターは:nth-child()
nth-child()
セレクターで指定した要素のうち、n番目の要素を選択する。()内はeven（偶数） odd（奇数） 2（2番目） 3n（3の倍数） 3n+1（3n+1番目）など。
jQueryで動的に装飾するので、後からデータを追加・削除してもcssやhtmlをいじる必要がまったく無いのが利点です。
キーとなるフィルターは:nth-child()
nth-child()
セレクターで指定した要素のうち、n番目の要素を選択する。()内はeven（偶数） odd（奇数） 2（2番目） 3n（3の倍数） 3n+1（3n+1番目）など。
ASCII.jp：CSS3のセレクターで作るストライプテーブル ｜Web制作の現場で使えるjQuery UIデザイン入門を参考に、以下の表を作成しました。
コードは以下の通り。
| 見出 | 見出 | 見出 | 見出 | 見出 | 見出 | 見出 | 見出 | 見出 | 見出 | 見出 | 見出 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
コードは以下の通り。
<style type="text/css">
table#stripetable {
border-collapse:collapse;
background-color:#eeeeee;
}
table#stripetable th {
color:#fff;
background-color:#aaa;
padding:5px;
}
table#stripetable td {
padding:5px;
}
table#stripetable .even {
background-color:#fff;
}
table#stripetable .hover {
background-color:#aaaaff;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#stripetable tr:nth-child(even)").addClass("even");
$("#stripetable tr:not(:first-child)").mouseover(function(){
$(this).addClass("hover");
}).mouseout(function(){
$(this).removeClass("hover");
});
$("#stripetable td").mouseover(function(){
$("#stripetable td:nth-child("+($("#stripetable td").index(this)%$("#stripetable th").size()+1)+")").addClass("hover");
}).mouseout(function(){
$("#stripetable td:nth-child("+($("#stripetable td").index(this)%$("#stripetable th").size()+1)+")").removeClass("hover");
});
})
</script>
<table id="stripetable">
<tr>
<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>
<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>
<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>
</tr>
</table>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 17:15│Comments(0)
│jQuery
