jQuery glisser vers le haut de la ligne de Table

Je construis un plugin jQuery personnalisé qui permet à l'utilisateur de supprimer des enregistrements dans une table en temps réel, entre autres choses. Lorsque les enregistrements sont supprimés, je voudrais que la couleur d'arrière-plan de la ligne de table supprimée devienne rouge, puis glisse hors de la vue.

Voici un extrait de mon code ci-dessous, qui ne fait aucune animation de changement de couleur, et ne glisse pas vers le haut de la ligne. Cependant, il supprime la ligne lorsque ce qui est censé être l'animation slide up, se termine. Quelques choses à savoir lors de la révision du code ci-dessous:

  1. la variable "object" est une référence jQuery à l'objet qui a été cliqué et a déclenché l'opération de suppression.
  2. Le " objet.parent().parent () " objet est la ligne qui est en cours de suppression.
  3. la classe CSS" deleteHighlight " contient la couleur qui transformera la ligne en couleur rouge.
  4. la méthode" addClass " utilise la méthode "addClass" de jQueryUI, pas celle de jQuery. rappel.
object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
  $(this).slideUp(1000, function() {
  //Delete the old row
    $(this).remove();
  });
});

Voici le code HTML sur lequel ceci est exécuté, rien de spécial: 

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>

Quelqu'un pourrait-il fournir un exemple de la façon dont je peux résoudre ce problème?

Merci pour votre temps.

24
demandé sur Oliver Spryn 2011-07-06 20:43:17

5 réponses

Je soupçonne que c'est en partie un problème de navigateur. Vous ne devriez pas vraiment cibler les <tr /> car les navigateurs les interprètent différemment. De plus, ils se comportent différemment des éléments de bloc.

Dans cet exemple: http://jsfiddle.net/lnrb0b/3t3Na/1/ votre code fonctionne partiellement dans google chrome. Le style <tr /> est autorisé (contrairement à certaines versions D'IE) mais vous ne pouvez pas l'animer. Si vous le faites display:block pas de soucis, mais alors c'est un peu nul comme une table:)

Dans cet exemple: http://jsfiddle.net/lnrb0b/3t3Na/2/{[8] }vous verrez que j'ai animé les <td /> mais ils travaillent à peine et péniblement lentement à cela.

Avoir un test de ceux-ci et je vais essayer de penser à une solution en attendant.

13
répondu lnrbob 2011-07-06 17:14:28

La façon la plus élégante de gérer la diapositive et le retrait est d'envelopper le contenu intérieur de chaque td avec un div, et de réduire simultanément le rembourrage du td et la hauteur du div. Consultez cette démo simple: http://jsfiddle.net/stamminator/z2fwdLdu/1/

6
répondu Jacob Stamm 2016-03-29 13:12:34

addClass n'accepte pas une fonction de rappel, car elle s'est exécutée immédiatement. Je pense que vous voudrez peut-être quelque chose de plus comme ça.

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
});
4
répondu Dutchie432 2011-07-06 18:18:29

Bien sûr, vous pouvez!

Enveloppez chaque td du tr que vous voulez glisser vers le haut dans un div, puis faites glisser ces divs!

Bien sûr, vous devez animer les rembourrages (haut et bas) de chaque td.

Ici vous pouvez trouver un exemple complet ici:

Http://jsfiddle.net/3t3Na/474/

Extrait de mon code source:

$('a').click(function(){
var object = $(this);
object.parent().parent().addClass('deleteHighlight', 1000, function() {
    $(this).find('td').each(function(index, element) {

    // Wrap each td inside the selected tr in a temporary div
    $(this).wrapInner('<div class="td_wrapper"></div>');

    // Fold the table row
    $(this).parent().find('.td_wrapper').each(function(index, element) {

    // SlideUp the wrapper div
    $(this).slideUp();

    // Remove padding from each td inside the selected tr
    $(this).parent().parent().find('td').each(function(index, element) {
        $(this).animate({
            'padding-top': '0px',
            'padding-bottom': '0px'
        }, function() {
            object.parentsUntil('tr').parent().remove();
        });
    });
});
2
répondu Gianpiero Franchino 2017-01-07 08:09:52

Pour une raison quelconque, le wrapInner () avec div ne fonctionnait pas pour moi, donc j'ai fait une solution moins élégante, où vous animez la taille de la police de la ligne, puis la cachez, puis restaurez la taille de la police à la normale alors que la ligne est invisible. 

    this.trs
        .animate({ 'fontSize': '1px' }, 70)
        .slideUp(1)
        .animate({ 'fontSize': '12px'}, 10)
        ;

Je l'utilise pour animer des groupes de ressources collapse/expand dans fullcalendar.js + scheduler.vues du calendrier js.

0
répondu K48 2016-06-02 07:36:35