Сдвиг вверх или вниз по всей HTML-таблице с использованием jquery не работает

Я искал решение, но я не мог его найти. Я даже пробовал это из SO, div будет скользить, но он не будет скользить

В основном я использую slideUp() из jquery в таблице, но он не скользит вверх, а просто исчезает.

Я сделал float: none в таблице, добавьте position: relative в родительский элемент. Но он все еще не показывает эффект скольжения.

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;
}

Ответ 1

Таблицы являются точными, и вам следует избегать непосредственного использования эффектов для таблицы. Что делает работа обертывания div вокруг вашей таблицы и применения вашего эффекта к этому.

У вас нет такого же контроля над таблицами, как и другие элементы. Именно поэтому blindUp не может изменить высоту таблицы во время анимации.

вот пример: http://jsfiddle.net/BQTGF/

Ответ 2

Таблица не является элементом уровня блока, поэтому ее высота и ширина не устанавливаются. Чтобы заставить это работать, оберните таблицу элементом уровня блока, таким как тег div, и выполните слайд-эффект на 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

Если вы собираетесь удалить таблицу, использование .wrapAll(...) не позволит вам украсить вашу разметку ненужными тегами.

Следующий пример добавляет div динамически, когда ему нужно скопировать таблицу, а затем удаляет таблицу (и временный div):

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

Ответ 4

Одна вещь, которую вы можете сделать, - это обернуть всю таблицу в деление, а затем использовать метод toggle следующим образом:

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

Ответ 5

Я узнал кое-что о javaScript в последние дни, и я думаю, что этот код может вам помочь:

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

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

});

Что должен делать этот код, так это то, что при нажатии тега "H1" он должен скрыть тег "Таблица" Но я немного исказил слайд, но есть Hide and Show. Надеюсь, что я помогу