ここでは、jQueryを使用して表Zebra Stripesエフェクトを作成する方法を示す簡単な例を示します。 

<html>
<head>
<title>jQuery Zebra Stripes</title>
</head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

    <script type="text/javascript">
      $(function() {
        $("table tr:nth-child(even)").addClass("striped");
      });
    </script>

    <style type="text/css">
      body,td {
        font-size: 10pt;
      }
      table {
        background-color: black;
        border: 1px black solid;
        border-collapse: collapse;
      }
      th {
        border: 1px outset silver;
        background-color: maroon;
        color: white;
      }
      tr {
        background-color: white;
        margin: 1px;
      }
      tr.striped {
        background-color: coral;
      }
      td {
        padding: 1px 8px;
      }
    </style>


<body>
    <table>
      <tr>
        <th>ID</th>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Apple</td>
        <td>0.60</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Orange</td>
        <td>0.50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Banana</td>
        <td>0.10</td>
      </tr>
      <tr>
        <td>4</td>
        <td>strawberry</td>
        <td>0.05</td>
      </tr>
      <tr>
        <td>5</td>
        <td>carrot</td>
        <td>0.10</td>
      </tr>
    </table>
</body>
</html>


jquery-zebra-stripes、title = "jquery-zebra-stripes"

jQueryでは、テーブルゼブラストライプエフェクトは1つのステートメントで実現されます。 

 $(function() {
        $("table tr:nth-child(even)").addClass("striped");
});

addClass（ “striped”）=すべての偶数行が “ストライプ” CSSクラスを動的に追加します。

リンク://wp-content/uploads/jQuery/jQuery-zebra-stripes-effect.html[デモを試してください]


jquery