Home > JavaScript > [ JavaScript ] jQuery でテーブルのセルをストライプ ( しましま ) にするサンプル

[ JavaScript ] jQuery でテーブルのセルをストライプ ( しましま ) にするサンプル

投稿日 : 2008-10-08
更新日 : 2008-10-08
JavaScript
CSS + JavaScript + jQuery + Sample + Table

jQuery を使ってテーブルの偶数行にスタイルを適用するサンプルです。

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>