Question

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):

<table id="eventInfo">
<tr> 
     <td class="name">John</td> 
     <td class="date">Dec 20</td> 
     <td class="**time**">2pm</td>
     <td class="**time**">3pm</td>
     <td class="**time**">4pm</td>
     <td class="event">Birthday</td>                
 </tr>
 <tr> 
     <td class="name">Billy</td> 
     <td class="date">Dec 19</td> 
     <td class="**time**">6pm</td>
     <td class="**time**">7pm</td>
     <td class="**time**">8pm</td>
     <td class="event">Birthday</td>         
</tr>  

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:

<table id="eventInfo">
<tr> 
     <td class="name">John</td> 
     <td class="date">Dec 20</td> 
     <td class="**time** **timenum-1**">2pm</td>
     <td class="**time** **timenum-2**">3pm</td>
     <td class="**time** **timenum-3**">4pm</td>
     <td class="event">Birthday</td>                
 </tr>
 <tr> 
     <td class="name">Billy</td> 
     <td class="date">Dec 19</td> 
     <td class="**time** **timenum-1**">6pm</td>
     <td class="**time** **timenum-2**">7pm</td>
     <td class="**time** **timenum-3**">8pm</td>
     <td class="event">Birthday</td>         
</tr>  

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:

$(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 = '<b>" + this.className + "</b>')");
            });    

        });

    });

Unfortunately, this only results in:

<table id="eventInfo">
<tr> 
     <td class="name">John</td> 
     <td class="date">Dec 20</td> 
     <td class="**time** **timenum-1**">2pm</td>
     <td class="**time** **timenum-2**">3pm</td>
     <td class="**time** **timenum-3**">4pm</td>
     <td class="event">Birthday</td>                
 </tr>
 <tr> 
     <td class="name">Billy</td> 
     <td class="date">Dec 19</td> 
     <td class="**time** **timenum-4**">6pm</td>
     <td class="**time** **timenum-5**">7pm</td>
     <td class="**time** **timenum-6**">8pm</td>
     <td class="event">Birthday</td>         
</tr>  

Thanks for your help!

Answer 1

$("td.time") select all table cells with class time not only those in that row. Add a reference to the row as the (second) context parameter just as you are doing in the other each loop: $("td.time", this)