{"authorId":"1","title":"jQuery Table Striping Bug","slug":"jquery-table-striping-bug","postDate":1213749358,"expiryDate":null,"enabled":"1","fields":{"2":"<p>I have been using <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> to do table striping, and up until today, I have not had any problems with it.<\/p>\n\n<p>I had just been using the <a href=\"http:\/\/docs.jquery.com\/Selectors\/even\">:even<\/a> and <a href=\"http:\/\/docs.jquery.com\/Selectors\/odd\">:odd<\/a> selectors to add classes to each table row.<\/p>\n<!--more-->\n<p>Here is the code that I have been using:<\/p>\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;$(\"table.striped&nbsp;tbody&nbsp;tr:odd\").addClass(\"odd\");<br \/>&nbsp;$(\"table.striped&nbsp;tbody&nbsp;tr:even\").addClass(\"even\");<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n<p>Seems easy enough. Then I just styled the odd table rows like so:<\/p>\n<div class=\"codeblock\"><code>\ntable.striped&nbsp;tr.odd&nbsp;td&nbsp;&#123;&nbsp;background-color:&nbsp;#f0f0f4;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n<p>One thing to note is that the <strong>:even<\/strong> and <strong>:odd<\/strong> selectors are zero-indexed, so the <strong>first table row will have a class of even, and not odd<\/strong>. <a href=\"http:\/\/trevordavis.net\/play\/jquery-table-striping\/\">Here is an example showing this simple striping<\/a>.<\/p>\n\n<h2>Multiple Striped Instances<\/h2>\n<p>The situation that I had today had two different tables that were being striped. So based on the code, you would think that there wouldn&rsquo;t be a problem. <a href=\"http:\/\/trevordavis.net\/play\/jquery-table-striping\/multiple-striping-instances\/\">Here is the example with two striped tables on the same page<\/a>.<\/p>\n\n<p>Weird, so it looks like the first table row in the second striped table has a class of even instead of odd. I thought that the client may not like that because the two tables were not consistent, so I tried to think of another way to do the striping.<\/p>\n\n<h2>The nth Child<\/h2>\n<p>So based on the documentation, it looks like <a href=\"http:\/\/docs.jquery.com\/Selectors\/nthChild#index\">the nth child selector<\/a> would be the solution. I just modified my JavaScript like so:<\/p>\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;$(\"table.striped&nbsp;tbody&nbsp;tr:nth-child(odd)\").addClass(\"odd\");<br \/>&nbsp;$(\"table.striped&nbsp;tbody&nbsp;tr:nth-child(even)\").addClass(\"even\");<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n<p>As a note, <strong>the nth child selector is not zero indexed<\/strong>, so the first table row will have a class of odd instead of even. <a href=\"http:\/\/trevordavis.net\/play\/jquery-table-striping\/using-nth-child\/\">Here is the fixed example<\/a>.<\/p>\n\n<h2>Conclusion<\/h2>\n<p>From what I can tell, this does not appear to be a browser problem, but a bug in jQuery. I have checked this in Firefox, Safari, IE6 and IE7.<\/p>","14":{"old_id":{}}}}