Javascript 使用jquery向上或向下滑动整个HTML表，不会'；行不通

我一直在寻找解决办法，但找不到。我甚至试过这个

基本上，我在一个表上使用jquery中的

slideUp（）

，但它没有向上滑动，而是显示出来

我已经在表上完成了

float:none

，将

position:relative

添加到父元素。但它仍然没有显示滑动效果

jquery：

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

html:

---

表格很挑剔，应该避免直接在表格上使用效果。有效的方法是在你的桌子周围环绕一个div，并将你的效果应用到它上

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

以下是一个例子：

---

表格不是块级元素，因此其高度和宽度不可设置。为了实现这一点，请将表包装在块级元素（如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();
});

$Value一$Value二$Value三$Value四
MSFRGFCHGGKJVJ123412345678英镑移除
$（“#凭证btn”）。单击（功能（e）{
$（'包装器'）.slideUp（400）；
e、 预防默认值（）；
});

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

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

$（''）.wrapInner（''）.toggle（'slide'，{direction:'direction}，speed）；

如果要删除该表，使用

.wrapAll（…）

可以避免用不必要的标记修饰标记

以下示例在需要滑动关闭表时动态添加div，然后删除表（和临时div）：

$（'#tableId'）.wrapAll（''.closest（'div'）.slideUp（1000，函数（）{
$（'#tableId'）。最近（'div'）。删除（）；
});

最近几天我学到了一些关于javaScript的知识，我认为这些代码可能会帮助您：

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

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

});

这段代码应该做的是，通过标记“H1”，单击它应该隐藏标记“Table”

---

但是我在幻灯片上看起来有点混乱，但是有隐藏和显示。希望我能帮助将表包装在一个Div中，并在Div上使用slideUp函数。对于

td、tr

和其他表元素，这是相同的技术吗？很遗憾，您不能将Div包装在td、tr、th周围，因为这将是无效的标记。我不知道jquery slideUp/down不能直接在HTML表上工作。将

包裹在它周围，它就工作了。接近。

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

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

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

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

});