Comment afficher le nombre d'enregistrement des enfants dans parent en utilisant Javascript ou JQuery

<html> 
<head> 
<script src="some.js" type="text/javascript"></script> 
<script type="text/javascript"> 

//??? 
//??? 

); 

</script> 
</head> 
<body> 
<table> 
<tr id="parent_1"> 
<td>Parent 1</td> 
</tr> 
<tr class="child"> 
<td>Child 1</td> 
</tr> 
<tr class="child"> 
<td>Child 2</td> 
</tr> 
<tr id="parent_2"> 
<td>Parent2</td> 
</tr> 
</table> 
</body> 
</html>

Je voulais « Parent 1 » texte passe à « Parent 1 (2) » où « 2 » est le nombre d'enfants pour le parent donné en utilisant le script Java ou Jquery. Comment est-ce possible?

Je suis nouveau sur JQuery et le script Java.

Faites-le moi savoir s'il vous plaît.

Source

2009-04-17 Anonymous

Mmm. Dur. :) Cela devrait le faire, bien que:

$(function() { 
    $("tr[id^='parent_']").each(function() { 
     var count = 0; 
     $(this).nextAll('tr').each(function() { 
      if($(this).hasClass('child')) { 
       count++; 
      } else { 
       return false; 
      } 
     }); 
     $(this).find('td').append(' (' + count + ')'); 
    }); 
});

Tested and works.

Bien que ce qui précède fonctionne, il n'est pas très efficace. Je veux aussi prendre une seconde pour vous suggérer de changer un peu le format de votre HTML. Vous voulez que votre code soit aussi sémantiquement pertinent au contenu qu'il contient que possible. Avoir une grande table qui mélange les parents et les enfants n'est pas la meilleure façon d'y parvenir. Je ne sais pas ce que votre cas d'utilisation est ici, mais envisager de faire quelque chose comme ceci:

<ul> 
    <li id="parent_1"> 
    <span>Parent 1</span> 
    <ul> 
     <li>Children 1</li> 
     <li>Children 2</li> 
     <li>Children 3</li> 
    </ul> 
    </li> 
    <li id="parent_2"> 
    <span>Parent 2</span> 
    <ul> 
     <li>Children 1</li> 
    </ul> 
    </li> 
    <li id="parent_3"> 
    <span>Parent 3</span> 
    <ul> 
     <li>Children 1</li> 
     <li>Children 2</li> 
    </ul> 
    </li> 
</ul>

Vous pouvez encore le style de ce mais vous voulez donner l'apparence que vous voulez, mais il ne peut pas être aussi facile si vous vraiment afficher des données tabulaires sur les parents et les enfants.

Avec ce code, cependant, vous pouvez ensuite simplifier ci-dessus avec beaucoup plus efficace:

$('ul > li').each(function() { 
    var count = $(this).find('li').length; 
    $('span', this).append(' (' + count + ')'); 
});

Si la modification du code d'une table à une liste n'est pas possible/souhaité, mais vous avez accès à le code côté serveur qui génère probablement cette table, vous pourriez au moins faciliter les choses, puis en donnant à tous les enfants une classe avec l'ID du parent, et donnant tous les parents d'une classe commune:

<table> 
    <tr id="parent_1" class="parent"> 
     <td>Parent 1</td> 
    </tr> 
    <tr class="child parent-1"> 
     <td>Child 1</td> 
    </tr> 
    <tr class="child parent-1"> 
     <td>Child 2</td> 
    </tr> 
    <tr id="parent_2" class="parent"> 
     <td>Parent2</td> 
    </tr> 
    <tr class="child parent-2"> 
     <td>Child 1</td> 
    </tr> 
    <tr id="parent_3" class="parent"> 
     <td>Parent3</td> 
    </tr> 
    <tr class="child parent-3"> 
     <td>Child 1</td> 
    </tr> 
    <tr class="child parent-3"> 
     <td>Child 2</td> 
    </tr> 
    <tr class="child parent-3"> 
     <td>Child 3</td> 
    </tr> 
</table>

qui vous permettrait alors de le faire, beaucoup plus vite que la solution originale:

$('tr.parent').each(function() { 
    var id = $(this).attr('id').split('_').pop(); 
    var count = $('tr.parent-' + id).length; 
    $(this).find('td').append(' (' + count + ')'); 
});

Source

2009-04-17 17:30:21

+1 pour le résoudre, puis en suggérant une disposition plus appropriée eeds. – Jab

Donnez aux parents une classe de «parent» pour le rendre un peu plus facile.

$('tr.parent').each(function() { 
    var next = $(this).next(); 
    var count = 1; 
    while (next = $(next).next() && $(next).hasClass('child')) { 
    count++; 
    } 
    $(this).find('td').append(' (' + count + ')'); 
});

Source

2009-04-17 17:34:25 Matt

Cela ne fonctionne pas avec l'HTML collé ci-dessus. –

Parce que votre html ne placez pas réellement les nœuds enfants sous les nœuds parents dans le balisage, la meilleure façon de le faire sera de boucle à travers tous les TR de et compter jusqu'à class = « enfant » pour chaque parent . Le code de Paolo devrait le faire pour vous.

Il serait préférable d'avoir les nœuds enfants définis comme enfants du td parent, alors jquery peut simplifier les choses pour vous.Si vous pouvez vous permettre de factoriser votre table comme ceci:

<table> 
<tr id="parent_1"> 
<td>Parent 1 
<table> 
<tr class="child"> 
<td>Child 1</td> 
</tr> 
<tr class="child"> 
<td>Child 2</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr id="parent_2"> 
<td>Parent2</td> 
</tr> 
</table>

alors vous pouvez écrire plus simple jquery comme:

$("td").each(function(){$(this).val($(this).val() + "(" + $(this).find("td").length + ")"); });

Source

2009-04-17 17:38:18 Joel

Je trouve les sélecteurs de jQuery complexes et des boucles tout à fait amusant, étant donné que les DOM a déjà une très bonne propriété 'rowIndex' que vous pouvez utiliser pour saisir le nombre d'enfants simplement et beaucoup plus efficacement:

var p1= document.getElementById('parent_1'); 
var p2= document.getElementById('parent_2'); 

var childn= p2.rowIndex-p1.rowIndex-1; 
p1.cells[0].firstChild.data+= ' ('+childn+')';

Source

2009-04-18 04:27:01 bobince

Si vous allez remarquer avec suffisance quelque chose que nous avons tous manqué, fournissez au moins un code de travail qui fonctionnera pour n'importe quel groupe de parents. :) J'imagine que l'obtention du parent suivant, la détermination du nombre si c'est le dernier parent, etc., serait pire que la plupart des solutions fournies. –

Comment afficher le nombre d'enregistrement des enfants dans parent en utilisant Javascript ou JQuery

Répondre

Questions connexes