How to create a table Zebra Stripes effect with jQuery

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.

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
9 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
MamoonAlagusundarRahul Kumar SharmapninaNam Recent comment authors
newest oldest most voted
Mamoon
Guest
Mamoon

You can also use.

$(“table tr:odd”).addClass(“striped”);

$(“table tr:even”).addClass(“striped”);

Alagusundar
Guest
Alagusundar

Great example Sir. In this example is very helpful to my project. Thanks for sharing this information.
http://www.dreamdestinations.in/

Rahul Kumar Sharma
Guest
Rahul Kumar Sharma

Hello M.K.

I am following your blog from since one year. I am not impressed with this blog as this simple task can be done using css.

Thanks

pnina
Guest
pnina

Great very simple and elegant

Nam
Guest
Nam

Mkyong is Great Person .

I am NAM 32age from Ho Chi Minh City ( Viet Nam )
I like it so much .

Thank you Mkyong
My email : phuongnamvu[dot]gmail.com
Cell : +8490- xxx- xxxx ( New member )

HaloPat
Guest
HaloPat

Thanks!

Valikonen
Guest
Valikonen

Very cool effect, thanks!!! If you want to see gallery and menus, vizit http://www.1artmedia.com, you have online demo and free download, bye!

anonymous
Guest
anonymous

nice.. it’s very helpful for newbie like me.. :)

trackback
jQuery – nth-child selector example | JQuery

[…] P.S The ‘even’ and ‘odd’ are always used to create table zebra stripes effect. […]