Comment faire pour afficher plus de 5 lignes d'un tableau sur le clic sur un bouton à l'aide de jQuery

Je l'ai pré-charger une table avec toutes ses lignes. Cependant, je ne veux afficher que les top 10 des lignes qui sont à l'intérieur de la <tbody> tag et maintenant, tous les <tr> dans le tableau.

Voici donc ce que j'ai fait jusqu'à présent:

var trs =  $("#internalActivities > table > tbody > tr");
trs.hide();
trs.slice(0, 9).show(); 

$("#seeMoreRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr:hidden").slice(0, 10).show();          
});

$("#seeLessRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(9, 19).hide();          
});

Le problème avec le code ci-dessus est que:

  1. Il n'a pas l'air de le <tr> seulement avec le <tbody> tag.
  2. Le voir bouton de moins besoin de supprimer les 10 lignes de bas en haut et pas tous d'entre eux.
  3. J'ai besoin de masquer le bouton seeMoreRecords si ils sont tous affichés.
  4. Si le minimum de la ligne s'affiche, puis masquer le seeLessRecords bouton.

Aspect Final de mon script d'affichage de 10 lignes par défaut et si l'utilisateur clique sur voir plus de vous voir 10 de plus. C'est donc un incrément de 10 à la fois, et une fois que vous frappez max puis masquer le voir plus de bouton. Voir moins est visible uniquement si il y a plus de 10 lignes affichées.

OriginalL'auteur Mike | 2013-06-22