https://legacy.forums.gravityhelp.com/topic/background-color-of-alternate-rows Gravity Support Forums Topic: Background color of alternate rows en-US Tue, 21 Apr 2026 17:18:34 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/background-color-of-alternate-rows#post-20021 Sun, 06 Mar 2011 23:49:02 +0000 yannibmbr 20021@https://legacy.forums.gravityhelp.com/ <p>Hey Kevin,<br /> Thanks so much for the feedback. I wasn't able to implement your exact suggestion successfully, but it lead me to finding out how I could. I saw similar documentation on jquery.com and saw the following example:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; table { background:#f3f7f5; } &lt;/style&gt; &lt;script src=&quot;http://code.jquery.com/jquery-1.5.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table border=&quot;1&quot;&gt; &lt;tr&gt;&lt;td&gt;Row with Index #0&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row with Index #1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row with Index #2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row with Index #3&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;script&gt;$(&quot;tr:odd&quot;).css(&quot;background-color&quot;, &quot;#bbbbff&quot;);&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> https://legacy.forums.gravityhelp.com/topic/background-color-of-alternate-rows#post-20011 Sun, 06 Mar 2011 18:24:09 +0000 Kevin Flahaut 20011@https://legacy.forums.gravityhelp.com/ <p>You'd need to use jQuery to dynamically add alternate row styles.. something like this added to your page template.</p> <pre><code>jQuery(document).ready(function() { // add odd and even classes to table rows jQuery(&#39;table tbody.user-list &gt; tr:odd&#39;).addClass(&#39;oddrow&#39;); jQuery(&#39;table tbody.user-list &gt; tr:even&#39;).addClass(&#39;evenrow&#39;); });</code></pre> <p>then add the new classes to your theme stylesheet</p> <pre><code>tr.oddrow {background-color:#fff} tr.evenrow {background-color:#eee}</code></pre> https://legacy.forums.gravityhelp.com/topic/background-color-of-alternate-rows#post-20007 Sun, 06 Mar 2011 16:00:21 +0000 yannibmbr 20007@https://legacy.forums.gravityhelp.com/ <p>So I'm using gravity forms as a directory listing. I'd like to know how to style the directory output such that every other row is a different color. How would I accomplish that?</p> <p>Thanks.</p> <p><a href="http://yoga.digisavvy.com/teachers-directory" rel="nofollow">http://yoga.digisavvy.com/teachers-directory</a> </p>