title: Alternate Table Row Background Color Based on Column Value Changing
body: <p>I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data.  I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work.  I've created a very simple <a href="http://jsfiddle.net/BigSexy/xpvt214o/1021542/" rel="nofollow noreferrer">jsFiddle</a> that has all rows the same color for you to play with.  </p>
  
  <p><strong>UPDATED EXPLANATION:</strong>
    When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1.  When that value changes to 2 I want the table rows to change colors to lightgreen.  When the Key column value then changes to 3 I want the colors to switch back to aliceblue.  When the key column value changes to 4 I want it to flip back to light green.  Hope this helps to clarify...</p>
  
  <p>As always, any help you can give would be greatly appreciated!! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>tbody tr {
    background: aliceblue;
  }
  
  .altColor {
    background: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="banner-message"&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Key&lt;/th&gt;
                &lt;th&gt;val&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>