Here is a simple example to show how to create a table Zebra Stripes effect with jQuery.

<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

In jQuery, the table zebra stripes effect is achieved with one statement.

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

P.S nth-child(even)”).addClass(“striped”) = every even row add “striped” CSS class dynamically.

Try Demo
This article was posted in JQuery category.

Related Posts