<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>jQuery Wisdom &#187; Snippets</title>
	<atom:link href="http://www.jquery.wisdomplug.com/tag/snippets/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jquery.wisdomplug.com</link>
	<description>jQuery Resources Blog</description>
	<lastBuildDate>Sat, 13 Aug 2011 10:52:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Zebra stripes with jQuery</title>
		<link>http://www.jquery.wisdomplug.com/jquery-snippets/zebra-stripes-with-jquery/</link>
		<comments>http://www.jquery.wisdomplug.com/jquery-snippets/zebra-stripes-with-jquery/#comments</comments>
		<pubDate>Sun, 19 Jul 2009 06:33:13 +0000</pubDate>
		<dc:creator>Jim</dc:creator>
				<category><![CDATA[Snippets]]></category>

		<guid isPermaLink="false">http://wisdomplug.com/jquery/?p=5</guid>
		<description><![CDATA[The following snippet describes how you can add ‘Zebra Stripes’ to your tables with JavaScript and jQuery. The colours could be applied with CSS classes in stead, which would also work in browsers with JavaScript disabled, but the interesting part here is the hover effect, which is not possible without JavaScript Html: Linie1 Linie2 Linie3 [...]]]></description>
			<content:encoded><![CDATA[<p>The following snippet describes how you can add ‘Zebra Stripes’ to your tables with JavaScript and  jQuery.</p>
<p><span id="more-5"></span></p>
<p>The colours could be applied with CSS classes in stead, which would also work in browsers with JavaScript disabled, but the interesting part here is the hover effect, which is not possible without JavaScript <img src='http://www.jquery.wisdomplug.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Html:</p>
<pre lang="HTML">
<table border="0">
<tbody>
<tr>
<td>Linie1</td>
</tr>
<tr>
<td>Linie2</td>
</tr>
<tr>
<td>Linie3</td>
</tr>
<tr>
<td>Linie4</td>
</tr>
<tr>
<td>Linie5</td>
</tr>
</tbody>
</table>
</pre>
<p>Add the following JavaScript code, together with the jQuery class:</p>
<pre lang="Javascript">$(document).ready(function() {
    $(".zebrastripe tr:even").css("background-color","gray").hover(
      function() {
        $(this).css("background-color","yellow");
      }, function() {
        $(this).css("background-color","gray");
      });
    $(".zebrastripe tr:odd").css("background-color","blue").hover(
      function() {
        $(this).css("background-color","yellow");
      }, function() {
        $(this).css("background-color","blue");
      });
  });</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.jquery.wisdomplug.com/jquery-snippets/zebra-stripes-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

