title: How to set incremental CSS classes in each Table Cell with jQuery?
body: <p>I have a table populated via a DB and it renders like so (it could have any number of columns referring to "time", 5 columns, 8 columns, 2 columns, etc):</p>
  
  <pre><code>&lt;table id="eventInfo"&gt;
  &lt;tr&gt; 
       &lt;td class="name"&gt;John&lt;/td&gt; 
       &lt;td class="date"&gt;Dec 20&lt;/td&gt; 
       &lt;td class="**time**"&gt;2pm&lt;/td&gt;
       &lt;td class="**time**"&gt;3pm&lt;/td&gt;
       &lt;td class="**time**"&gt;4pm&lt;/td&gt;
       &lt;td class="event"&gt;Birthday&lt;/td&gt;                
   &lt;/tr&gt;
   &lt;tr&gt; 
       &lt;td class="name"&gt;Billy&lt;/td&gt; 
       &lt;td class="date"&gt;Dec 19&lt;/td&gt; 
       &lt;td class="**time**"&gt;6pm&lt;/td&gt;
       &lt;td class="**time**"&gt;7pm&lt;/td&gt;
       &lt;td class="**time**"&gt;8pm&lt;/td&gt;
       &lt;td class="event"&gt;Birthday&lt;/td&gt;         
  &lt;/tr&gt;  
  </code></pre>
  
  <p></p>
  
  <p>With jQuery, I'd like to go through each Table Row and incrementally set an additional class-name on only the Table Cells where "class='time'" so that the result would be:</p>
  
  <pre><code>&lt;table id="eventInfo"&gt;
  &lt;tr&gt; 
       &lt;td class="name"&gt;John&lt;/td&gt; 
       &lt;td class="date"&gt;Dec 20&lt;/td&gt; 
       &lt;td class="**time** **timenum-1**"&gt;2pm&lt;/td&gt;
       &lt;td class="**time** **timenum-2**"&gt;3pm&lt;/td&gt;
       &lt;td class="**time** **timenum-3**"&gt;4pm&lt;/td&gt;
       &lt;td class="event"&gt;Birthday&lt;/td&gt;                
   &lt;/tr&gt;
   &lt;tr&gt; 
       &lt;td class="name"&gt;Billy&lt;/td&gt; 
       &lt;td class="date"&gt;Dec 19&lt;/td&gt; 
       &lt;td class="**time** **timenum-1**"&gt;6pm&lt;/td&gt;
       &lt;td class="**time** **timenum-2**"&gt;7pm&lt;/td&gt;
       &lt;td class="**time** **timenum-3**"&gt;8pm&lt;/td&gt;
       &lt;td class="event"&gt;Birthday&lt;/td&gt;         
  &lt;/tr&gt;  
  </code></pre>
  
  <p> </p>
  
  <p>I've only been able to get it to count all of the Table Cells where "class='time'" and not each set within its own Table Row. This is what I've tried with jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  
       $("table#eventInfo tr").each(function() {   
              var tcount = 0;
              $("td.time").attr("class", function() {
                return "timenum-" + tcount++;
              })
              //writes out the results in each TD
              .each(function() {
                $("span", this).html("(class = '&lt;b&gt;" + this.className + "&lt;/b&gt;')");
              });    
  
          });
  
      });
  </code></pre>
  
  <p>Unfortunately, this only results in:</p>
  
  <pre><code>&lt;table id="eventInfo"&gt;
  &lt;tr&gt; 
       &lt;td class="name"&gt;John&lt;/td&gt; 
       &lt;td class="date"&gt;Dec 20&lt;/td&gt; 
       &lt;td class="**time** **timenum-1**"&gt;2pm&lt;/td&gt;
       &lt;td class="**time** **timenum-2**"&gt;3pm&lt;/td&gt;
       &lt;td class="**time** **timenum-3**"&gt;4pm&lt;/td&gt;
       &lt;td class="event"&gt;Birthday&lt;/td&gt;                
   &lt;/tr&gt;
   &lt;tr&gt; 
       &lt;td class="name"&gt;Billy&lt;/td&gt; 
       &lt;td class="date"&gt;Dec 19&lt;/td&gt; 
       &lt;td class="**time** **timenum-4**"&gt;6pm&lt;/td&gt;
       &lt;td class="**time** **timenum-5**"&gt;7pm&lt;/td&gt;
       &lt;td class="**time** **timenum-6**"&gt;8pm&lt;/td&gt;
       &lt;td class="event"&gt;Birthday&lt;/td&gt;         
  &lt;/tr&gt;  
  </code></pre>
  
  <p></p>
  
  <p>Thanks for your help!</p>