使用 jquery 向上或向下滑动整个 HTML 表格，不起作用答案

【问题标题】：Sliding up or down an entire HTML table using jquery, doesn't work使用 jquery 向上或向下滑动整个 HTML 表格，不起作用
【发布时间】：2011-03-30 17:25:49
【问题描述】：

我一直在寻找解决方案，但找不到。我什至从 SO 那里尝试过这个，div will slidedown but it wont slideup

基本上我在桌子上使用 jquery 中的slideUp()，但它不会向上滑动，而是消失了。

我已经在桌子上完成了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;
}

【问题讨论】：

将表格包裹在一个Div中，并在Div上使用slideUp功能。

标签： javascript jquery html css

【解决方案1】：

表格很挑剔，您应该避免直接在表格上使用效果。起作用的是将一个 div 包裹在你的桌子周围，然后将你的效果应用到它上面。

您对表格的控制与对其他元素的控制不同。这就是为什么blindUp不能在动画期间改变桌子的高度。

这是一个例子： http://jsfiddle.net/BQTGF/

【讨论】：

td, tr 和其他表格元素的技术是否相同？
很遗憾，您不能将 div 包裹在 td、tr、th 周围，因为这将是无效的标记。
从不知道 jquery 上滑/下滑不能直接在 HTML 表格上工作。将<div> 包裹在它周围并且它起作用了。欣赏。

【解决方案2】：

表格不是块级元素，所以它的高度和宽度是不可设置的。为了让它工作，将表格包装在块级元素中，例如 div 标签，并在 div 上执行 slideUp

<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】：

您可以做的一件事是将整个表格包装在一个分区中，然后使用切换方法如下：

$('<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”应该隐藏标签“Table” 但我看起来有点搞砸幻灯片的东西，但有隐藏和显示。希望能帮到你

【讨论】：