Glisser vers le haut ou vers le bas une table HTML entière en utilisant jquery, ne fonctionne pas

J'ai été à la recherche d'une solution mais je ne pouvais pas le trouver. J'ai même essayé de la SORTE, div sera slidedown mais il l'habitude de slideup

Fondamentalement, je suis en utilisant le slideUp() de jquery sur une table, mais il ne glisse pas, à la place juste pour disparaître.

J'ai fait le float: none sur la table, ajouter position: relative à l'élément parent. Mais ça ne fonctionne toujours pas montrer le glissement effet.

jquery:

$('#voucher-btn').click(function(e){
    $('#voucher-list').slideUp(400);
    e.preventDefault();
});

html:

<div id="main">

 <ul>
  <li><label>Scratch-off Panel</label><input type="text" id="scratch-panel" /></li> 
  <li><label>Serial Number</label><input class="field-small" type="text" id="serial-num" /></li>
  <!--<li><button class="but-sec" id="voucher-btn" type="submit" title="Apply">Apply</button></li>-->
  <li><input class="but-sec" type="submit" id="voucher-btn" value="Apply" /></li>
 </ul>

 <table id="voucher-list">
  <thead>
    <tr>
      <th width="200px">$Value One</th><th>$Value Two</th><th>$Value Three</th><th>$Value Four</th>
    </tr>
  </thead>
  <tbody>
    <td>MSFRGFCHGGKJVJ1234</td><td>12345678</td><td>£156678</td><td>Remove</td>
  </tbody>
 </table>

</div>

CSS:

#main{
 width: 700px;
 margin: 20px auto;
 position: relative;
}

#voucher-list{
 border-collapse: collapse;
 float: none;
 position: relative;
}

#voucher-list td, th{
 border: 1px solid #ccc;
 padding: 5px;
 text-align: left;
}

li{
 list-style: none;
 overflow: hidden;
 margin: 0 0 10px 0;
}

input[type="text"]{
 float: left;
 height: 20px;
 border: 1px solid #ccc;
}

label{
 float: left;
 width: 120px;
}

source d'informationauteur Shaoz

  1. 21

    Tables sont capricieux, et vous devriez éviter d'utiliser des effets sur une table directement. Ce qui fonctionne est l'enveloppant d'un div autour de votre table et appliquer votre effet à ce lieu.

    Vous n'avez pas le même contrôle sur les tables comme vous le faites d'autres éléments. C'est pourquoi blindUp ne pouvez pas modifier la hauteur de la table lors de l'animation.

    voici un exemple:
    http://jsfiddle.net/BQTGF/

  2. 4

    Une table n'est pas un élément de niveau bloc, de sorte que la hauteur et la largeur sont pas réglables. Afin d'obtenir que cela fonctionne, enveloppez-la d'un tableau dans un élément de niveau bloc, comme une balise div, et d'effectuer le slideUp sur la div

    <div id="wrapper">
 <table id="voucher-list">
  <thead>
    <tr>
      <th width="200px">$Value One</th><th>$Value Two</th><th>$Value Three</th><th>$Value Four</th>
    </tr>
  </thead>
  <tbody>
    <td>MSFRGFCHGGKJVJ1234</td><td>12345678</td><td>£156678</td><td>Remove</td>
  </tbody>
 </table>
</div>

$('#voucher-btn').click(function(e){
    $('#wrapper').slideUp(400);
    e.preventDefault();
});
  3. 1

    Si vous allez supprimer le tableau, à l'aide de .wrapAll(...) vous évitera d'avoir à les embellir votre balisage avec des balises inutiles.

    L'exemple suivant ajoute le div dynamiquement lorsque cela est nécessaire pour faire glisser la table fermée, puis supprime la table (et le temporaire div):

    $('#tableId').wrapAll('<div />').closest('div').slideUp(1000, function () {
    $('#tableId').closest('div').remove();
});
  4. 0

    Une chose que vous pouvez faire est d'envelopper la totalité de la table dans une division, puis utiliser la bascule méthode comme suit:

    $('<table id>').wrapInner('<div></div>').toggle('slide', { direction: "direction" }, speed);
  5. 0

    - Je apprendre quelque chose à propos de javaScript ce derniers jours et je pense que ce code peut vous aider à:

        $(document).ready(function()  {
    //Hide the table tags
     $("table").hide();

     $("h1").click(function() {
         $(this).next().slideToggle(500);
         });

});

    Ce que ce code devrait faire, c'est qu'avec la balise "H1" en cliquant dessus, il faut cacher la balise "Table"
    Mais je regarde un peu foiré la diapositive chose mais est-il de Masquer et d'Afficher. Espère que je l'Aide