Comment définir des classes CSS incrémentielles dans chaque cellule de tableau avec jQuery?

Question

J'ai une table peuplée par un DB et Renders comme si (elle pourrait avoir un certain nombre de colonnes se rapportant à « temps », 5 colonnes, 8 colonnes, 2 colonnes, 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> 

Avec jQuery, je voudrais passer par chaque ligne du tableau et définir progressivement un nom de classe supplémentaire uniquement sur les cellules de tableau où « « temps »= classe » de sorte que le résultat serait:

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

J'ai seulement été capable de compter toutes les cellules de table où "class = 'time'" et non chaque ensemble dans sa propre rangée de tableau. C'est ce que j'ai essayé avec 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>')"); 
      });  

     }); 

    }); 

Malheureusement, cela ne les résultats dans:

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

Merci pour votre aide!

Answer 1

$("td.time") sélectionnez toutes les cellules de table avec la classe time et non seulement celles de cette rangée. Ajouter une référence à la ligne que le (second) paramètre de contexte comme vous le faites dans l'autre each boucle: $("td.time", this)

Answer 2

$(document).ready(function() { 
    $("table#eventInfo tr").each(function() { 
     $(this).children('td').addClass(function (index) { 
      return 'timenum-' + (index + 1); 
     }); 
    }); 
});