- 投稿日 : 2008-10-08
- 更新日 : 2008-10-08
- JavaScript
jQuery を使ってテーブルの偶数行にスタイルを適用するサンプルです。
ソースコード
わかりやすくするため、余計なコードは省いてあります。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".data tr:even").addClass("even");
});
</script>
<style type="text/css">
tr.even td {
background: #ddd;
}
</style>
</head>
<body>
<table class="data">
<tr><th>header</th></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</body>
</html>
サンプルページ
参考にさせてもらったページ
ありがとうございます。 時間ができたら、onLoad のやり方も書いてみたい。
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://bowz.info/1691/trackback
- Listed below are links to weblogs that reference
- [ JavaScript ] jQuery でテーブルのセルをストライプ ( しましま ) にするサンプル from Bowz::Notebook