web-dev-qa-db-fra.com

slideToggle dans la ligne du tableau

slideToggle fonctionne-t-il avec la table?

Je veux faire glisser une ligne d'un tableau. mais il apparaît simplement sans aucun effet.

jqueryslidetoggle
30
hd.

SlideToggle fonctionne avec les lignes du tableau, c'est juste un peu nul.

Si vous avez une ligne de table avec une hauteur supérieure à son minimum - comme ceci

<tr height="30%">

Ensuite, slidetoggle fera un glissement vers le bas jusqu'à ce qu'il atteigne sa hauteur minimale ... puis il disparaîtra immédiatement comme vous l'avez utilisé

$("#tr").hide();

J'ai fait un jsfiddle démontrant cela à http://jsfiddle.net/BU28E/1/

Une meilleure solution pour vous peut être d'utiliser une table faite de divs. Les divs glisseront très facilement. J'ai fait un autre jsfiddle démontrant cela à http://jsfiddle.net/BU28E/2/

36
jwegner

Ce que je fais est de mettre un seul DIV dans la ligne et de définir le remplissage du TR et TD à zéro. Ensuite, je peux faire glisser-diviser le div au lieu de la ligne:

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

Fonctionne très bien. Je pense que vous pouvez mettre un DIV dans chaque colonne et les faire glisser simultanément si vous en avez besoin.

17
Jonatan

Je ne sais pas si cette solution de contournement est considérée de manière efficace et efficace, mais cela a fonctionné pour moi:

disons que vous voulez faire glisser la première ligne d'un tableau (ce code fera glisser l'en-tête):

$('table tr').first().children().slideUp();

donc, en gros, vous aimeriez faire glisser les enfants Row au lieu de la ligne elle-même :)

5
Mawaheb

Essayez d'utiliser

$("#tr").fadeToggle(1000)

pour un effet similaire

2
Robert Benyi

Pour ce faire, définissez le tr que vous souhaitez faire glisser sur display:none; puis à l'intérieur de ce tr ajoutez un td avec colspan égalant le nombre de colonnes de votre table avec un div qui est également défini comme display:none à l'intérieur de ce td.

Tout le contenu que vous voulez dans la ligne coulissante va dans le div susmentionné, résultant en un tr qui glisse avec animation.

L'extrait ci-dessous montre cela en action.

$(".accordion-row").on("click",
  function() {
    var accordionRow = $(this).next(".accordion");
    if (!accordionRow.is(":visible")) {
      accordionRow.show().find(".accordion-content").slideDown();
    } else {
      accordionRow.find(".accordion-content").slideUp(function() {
        if (!$(this).is(':visible')) {
          accordionRow.hide();
        }
      });
    }
  });
.accordion-row {
  cursor: pointer;
}

.accordion {
  display: none;
  width: 100%;
}

.accordion-content {
  display: none;
}


/* Only used to remove undeeded padding added by bootstrap */
table.table.table-hover>tbody>tr>td {
  padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>
        th1
      </th>
      <th>
        th2
      </th>
      <th>
        th3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-row">
      <td>
        tr1 td1
      </td>
      <td>
        tr1 td2
      </td>
      <td>
        tr1 td3
      </td>
    </tr>
    <tr class="accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr1 accordion-content
        </div>
      </td>
    </tr>
    <tr class="accordion-row">
      <td>
        tr2 td1
      </td>
      <td>
        tr2 td2
      </td>
      <td>
        tr2 td3
      </td>
    </tr>
    <tr class=" accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr2 accordion-content
        </div>
      </td>
    </tr>
  </tbody>
</table>
2
Callum

J'ai trouvé une solution de contournement à la question de ne pas pouvoir faire glisser les lignes du tableau. Ce code ne fonctionne que si le contenu de votre table est entièrement texte. Cela pourrait être ajusté pour prendre en charge d'autres choses (images, etc.) avec un peu de travail. L'idée est que la ligne ne rétrécira que jusqu'à ce qu'elle atteigne la taille de son contenu. Donc, si vous pouvez réduire le contenu si nécessaire, la diapositive continuera.

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
    $('#1').slideUp({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);

            // if the real and css heights differ, decrease the font size until they match
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();

    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

L'effet est légèrement différent, en ce sens que le contenu diminue par opposition à l'effet de diapositive normal.

les < 2 dans la dernière ligne devra peut-être être ajusté en fonction de vos bordures (et éventuellement d'autres facteurs). En outre, cela ne montre que masquer le contenu. Une approche similaire serait nécessaire pour permettre à la taille de la police d'augmenter à mesure que la ligne glisse. Il s'agit plus d'une preuve de concept.

2
James Montagne

Edit: Après avoir essayé la réponse de Jonatan, sa méthode semble un peu plus propre.

Ici, j'ai une ligne de tableau avec la classe view-converters Qui, lorsque vous cliquez dessus, affichera/masquera toutes les divs avec la classe TCConverters.

Mes lignes ressemblent à ceci:

<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>

Voici le code qui s'exécute lorsque vous cliquez sur view-converters.

Je n'ai rien fait de spécial avec le remplissage des cellules du tableau.

Notez que nous masquons la ligne du tableau lorsque nous avons terminé d'animer la diapositive.

$(".view-converters").click(function() {
    if(!$(".TCConverters:first").is(":visible")) {
        $(".TCConverters").parent().parent().show();
    }
    $(".TCConverters").slideToggle(200,function() { 
        if(!$(this).is(":visible")) {
            $(this).parent().parent().hide();
        }
    });
});

Cela ressemble à ceci:

Slide Table

Original:

Ici, j'ai une ligne de tableau avec la classe view-converters Qui, lorsque vous cliquez dessus, affichera/masquera toutes les lignes avec la classe TCConverters:

Vous pouvez ajuster la vitesse en changeant la valeur initiale hacky et l'incrément dans chaque .each.

Cela n'allonge pas les lignes aussi bien qu'une bascule de diapositive, mais l'effet a fonctionné à mes fins.

Si vous voulez vraiment réduire la hauteur de la ligne, vous pouvez probablement l'animer vous-même en remplaçant param.hide() par un setTimeout qui réduit la hauteur jusqu'à ce qu'elle atteigne 0.

$(".view-converters").click(function() {
    var hacky = 50;
    if($('.TCConverters:first').is(':visible')) {
        $('.TCConverters').each(function() {
            var param = $(this);
            setTimeout(function() { param.hide(); },hacky);
            hacky += 5;
        });
    }
    else {
        $($('.TCConverters').get().reverse()).each(function() {
            var param = $(this);
            setTimeout(function() { param.show(); },hacky);
            hacky += 5;
        });
    }
});

Cela ressemble à ceci:

TR Slide Toggle

0
user1274820