title: Alternating row colors in a ForEach loop
body: <p><strong>My foreach code</strong></p>
  
  <p>Notice that my second row has a different background color.</p>
  
  <pre><code>@foreach (var item in Model.fNameList)
  {
      &lt;tr&gt;
          &lt;td style ="background-color:#E0EBEB; height:40px;width:100px;"&gt;&lt;a href ="#" onclick='call();' style ="text-decoration:none; text-decoration-color:black;"&gt; T-00001&lt;/a&gt;&lt;/td&gt;
          &lt;td style ="background-color:#E0EBEB; height:40px;width:200px;"&gt; @item.firstName&lt;/td&gt;
      &lt;/tr&gt; 
      &lt;tr&gt;
          &lt;td style ="background-color:#fff; height:40px;width:100px;"&gt;&lt;a href ="#" onclick="call();" style ="text-decoration:none; text-decoration-color:black;"&gt; T-00001&lt;/a&gt;&lt;/td&gt;
          &lt;td style ="background-color:#fff; height:40px;width:200px;"&gt; @item.firstName&lt;/td&gt;
      &lt;/tr&gt;
  }
  </code></pre>
  
  <p>I want my second <em>TR</em> tag to have the second value of my "FIRSTNAME", example: if <em>var item[0]</em> is <strong>"FIRSTNAME" = "GEM"</strong>, and <em>var item[1]</em> is <strong>"FIRSTNAME" = "DIAMOND"</strong>. now if I run my code, the value of my first <em>TR</em> tag has <strong>"FIRSTNAME" = "GEM"</strong> while in the second <em>TR</em> tag the value is <strong>"FIRSTNAME" = "GEM"</strong> as well. Now I want my second <em>TR</em> tag to have the value: <strong>"FIRSTNAME" = "DIAMOND"</strong>.</p>