Comment trouver et changer les classes se multiplient ème entre n et n

Question

J'ai une structure de la table:

<tr class="row-2"><tr> 
    <tr class="row-3">..<tr> 
    <tr class="row-4">..<tr> 
    <tr class="row-5">..<tr> 
    <tr class="row-6">..<tr> 
    <tr class="row-7"><tr> 
    <tr class="row-8">..<tr> 
    <tr class="row-9">..<tr> 
    <tr class="row-10">..<tr> 
    <tr class="row-11">..<tr> 
...etc 

pour cet exemple TR avec des classes "ligne-2" et "ligne-7" est le lien produit Parrent Wich Développez les lignes enfant.

<script> 
$(function() { 
    $('tr.parent') 
     .css("cursor","pointer") 
     .css("color","red") 
     .attr("title","Click to expand/collapse") 
     .click(function(){ 
      $(this).siblings('.child-'+this.id).toggle(); 
     }); 
    $('tr[@class^=child-]').hide().children('td'); 
}); 
</script> 

lignes -3 ...- 6 est enfant de rang 2- et lignes -8 ...- 11 est adapté aux enfants de la ligne-7

Comment puis-je trouver row-2, row-7, etc, puis ajoutez une deuxième classe "parent" et une classe ID similaire (id = "row-2", id = "row-7", etc)? Aussi j'ai besoin d'ajouter dans chaque TR entre ligne-2 et ligne-7 classe égale parent précédent. En bout de ligne, je besoin de quelque chose comme ceci:

 <tr class="row-2 parent" id="row-2"><tr> 
     <tr class="row-3 child-row2">..<tr> 
     <tr class="row-4 child-row2">..<tr> 
     <tr class="row-5 child-row2">..<tr> 
     <tr class="row-6 child-row2">..<tr> 
     <tr class="row-7 parent" id="row-7"><tr> 
     <tr class="row-8 child-row7">..<tr> 
     <tr class="row-9 child-row7">..<tr> 
     <tr class="row-10 child-row7">..<tr> 
     <tr class="row-11 child-row7">..<tr> 
..etc 

Answer 1

Une façon est de faire deux passes sur toutes les lignes, de mettre en place les classes requises et ids. Dans la première passe, ajoutez un ID identique au nom de la classe et ajoutez également la classe parent à la ligne 2 et la ligne 7. Dans la deuxième étape, recherchez chaque ligne .parent et ajoutez la classe child-<id> à leurs frères et sœurs jusqu'au parent suivant. Au lieu de coder en dur les valeurs pour row-2 et row-7, cela suppose que tous les éléments d'en-tête sont contenus dans un élément <th>, au lieu d'un élément <td>.

Voici quelques code: http://jsfiddle.net/vYTW2/

/** 
* Do a two pass on all rows to set them up. 
* In the first pass, add the same id as class, and 
* add the "parent" class to the row. 
* 
* Assuming all product header rows contain a 
* <th> element 
*/ 
$('table tr th').each(function() { 
    var row = $(this).parent('tr'); 
    var id = row.attr('class'); 
    row.attr('id', id); 
    row.addClass('parent'); 
}); 

/** 
* In the second pass, run through all header rows 
* (that have the class parent) and mark all next siblings 
* with class "child-rowX" until we see the next parent row. 
*/ 
$('tr.parent').each(function() { 
    var id = $(this).attr('id'); 
    var className = 'child-' + id; 
    $(this).nextUntil('.parent').addClass(className); 
});