javascript 使用 jquery 向上或向下滑动整个 HTML 表格，不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5489829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sliding up or down an entire HTML table using jquery, doesn't work
提问by Shaoz
I've been looking for a solution but I couldn't find it. I even tried this from SO, div will slidedown but it wont slideup
我一直在寻找解决方案，但找不到。我什至从 SO 中尝试过这个，div 会向下滑动但不会向上滑动
Basically I'm using the slideUp()from jquery on a table but it doesn't slide up, instead it just dissappear.
基本上我在slideUp()桌子上使用from jquery 但它没有向上滑动，而是消失了。
I've done the float: noneon the table, add position: relativeto the parent element. But it still doesn't show the sliding effect.
我已经float: none在桌子上完成了，添加position: relative到父元素。但它仍然没有显示滑动效果。
jquery:
查询：
$('#voucher-btn').click(function(e){
$('#voucher-list').slideUp(400);
e.preventDefault();
});
html:
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:
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;
}
回答by Mark
Tables are finicky and you should avoid using effects on a table directly. What does work is wrapping a div around your table and applying your effect to that instead.
表格很挑剔，您应该避免直接在表格上使用效果。有效的是在你的桌子周围包裹一个 div 并将你的效果应用到它上面。
You don't have the same control over tables as you do other elements. Which is why blindUp can't change the height of the table during animation.
您对表格的控制权与对其他元素的控制权不同。这就是为什么blindUp 不能在动画期间改变表格的高度。
here is an example: http://jsfiddle.net/BQTGF/
这是一个例子：http: //jsfiddle.net/BQTGF/
回答by Adam
A table is not a block level element, so its height and width are not settable. In order to get this to work, wrap the table in a block level element, such as a div tag, and perform the slideUp on the div
表格不是块级元素，因此其高度和宽度不可设置。为了让它工作，将表格包裹在一个块级元素中，例如一个 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();
});
回答by Chris
If you are going to remove the table, using .wrapAll(...)will prevent you having to embellish your markup with unnecessary tags.
如果您要删除表格，使用.wrapAll(...)将防止您不得不用不必要的标签修饰您的标记。
The following example adds the div dynamically when it's needed to slide the table closed, and then removes the table (and the temporary div):
下面的示例在需要关闭表格时动态添加 div，然后删除表格（和临时 div）：
$('#tableId').wrapAll('<div />').closest('div').slideUp(1000, function () {
$('#tableId').closest('div').remove();
});
回答by LOCO_X_KILLER
I learn something about javaScript this last days and i think this code may help you:
我最近几天学习了一些有关 javaScript 的知识，我认为这段代码可能对您有所帮助：
$(document).ready(function() {
// Hide the table tags
$("table").hide();
$("h1").click(function() {
$(this).next().slideToggle(500);
});
});
What this code should do is that with the tag "H1" clicking it should hide the tag "Table" But i look a bit messed the slide thing but is there Hide and Show. Hope i Help
这段代码应该做的是，点击标签“H1”应该隐藏标签“表格”但是我看起来有点乱幻灯片但是有隐藏和显示。希望我有帮助
回答by shashank
One thing you can do is wrap the whole table in a division and then use toggle method as follows:
您可以做的一件事是将整个表格包装在一个分区中，然后按如下方式使用切换方法：
$('<table id>').wrapInner('<div></div>').toggle('slide', { direction: "direction" }, speed);
