Javascript jQuery 向上滑动表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6600021/
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
jQuery Slide Up Table Row
提问by Oliver Spryn
I am building a custom jQuery plugin which allows the user to delete records within a table in real-time, among many other things. When the records are deleted, I would like the the background-color of the deleted table row to turn red, then slide up out of view.
我正在构建一个自定义 jQuery 插件，它允许用户实时删除表中的记录等。当记录被删除时，我希望被删除的表格行的背景颜色变成红色，然后向上滑出视图。
Here is a snippet of my code below, which doesn't do any of the color changing animation, nor does it slide up the row. However, it does delete the row when what is supposed to be the slide up animation, finishes. Some things to know when reviewing the code below:
下面是我的代码片段，它不执行任何颜色变化动画，也不向上滑动行。但是，当应该是向上滑动的动画完成时，它会删除该行。查看以下代码时需要了解的一些事项：
- The "object" variable is a jQuery reference to the object which was clicked and triggered the delete operation.
- The "object.parent().parent()" object is the row which is being deleted.
- The "deleteHighlight" CSS class contains the color which will turn the row a red color.
- The "addClass" method uses jQueryUI's "addClass" method, not jQuery's. It allows an animated effect and a callback.
- “对象”变量是对被单击并触发删除操作的对象的 jQuery 引用。
- “object.parent().parent()”对象是被删除的行。
- “deleteHighlight”CSS 类包含将行变为红色的颜色。
- "addClass" 方法使用 jQueryUI 的 "addClass" 方法，而不是 jQuery 的。它允许动画效果和回调。
object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
$(this).slideUp(1000, function() {
//Delete the old row
$(this).remove();
});
});
Here is the HTML on which this is being executed, nothing special:
这是正在执行的 HTML，没什么特别的：
<table class="dataTable">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>
<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>
Could someone please provide an example of how I can fix this?
有人可以提供一个我如何解决这个问题的例子吗？
Thank you for your time.
感谢您的时间。
采纳答案by Stuart Burrows
I suspect this is partly a browser issue.
You shouldn't really target <tr />'s since browsers interpret them differently. Additionally they behave differently than block elements.
我怀疑这部分是浏览器问题。你不应该真正定位<tr />'s 因为浏览器对它们的解释不同。此外，它们的行为与块元素不同。
In this example: http://jsfiddle.net/lnrb0b/3t3Na/1/your code works partially in chrome. The <tr />is allowed styling (unlike in some IE versions) but you can't animate it. If you make it display:blockno worries, but then it's a bit rubbish as a table :)
在此示例中：http: //jsfiddle.net/lnrb0b/3t3Na/1/您的代码部分在 chrome 中工作。该<tr />允许造型（不像某些版本的IE），但你不能制作动画。如果你让它display:block不用担心，但它作为一张桌子有点垃圾:)
In this example: http://jsfiddle.net/lnrb0b/3t3Na/2/you'll see I've animated the <td />'s but they barely work and painfully slowly at that.
在这个例子中：http: //jsfiddle.net/lnrb0b/3t3Na/2/你会看到我已经为<td />'s 设置了动画，但它们几乎不起作用，而且速度很慢。
Have a test of those and I'll try think of a solution in the meantime.
对这些进行测试，同时我会尝试想出一个解决方案。
回答by Jacob Stamm
The most elegant way to handle the slide and removal is to wrap each td's inner contents with a div, and to simultaneously reduce the padding of the tdand the height of the divs. Check out this simple demo: http://jsfiddle.net/stamminator/z2fwdLdu/1/
处理滑动和移除的最优雅的方法是td用 a包裹每个的内部内容div，并同时减少s的填充td和高度div。看看这个简单的演示：http: //jsfiddle.net/stamminator/z2fwdLdu/1/
回答by Dutchie432
addClassdoes not accept a callback function, since it performed immediately. I think you may want something more like this.
addClass不接受回调函数，因为它立即执行。我想你可能想要更像这样的东西。
object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
$(this).remove();
});
回答by Gianpiero Franchino
Sure, you can!
你当然可以！
Wrap each td of the tr you want slide up into a div, then slide up those divs!
将你想要的 tr 的每个 td 包裹到一个 div 中，然后向上滑动这些 div！
Of course, you have to animate the paddings (top and bottom) of each td.
当然，您必须为每个 td 的填充（顶部和底部）设置动画。
Here you can find a full example here:
在这里你可以找到一个完整的例子：
http://jsfiddle.net/3t3Na/474/
http://jsfiddle.net/3t3Na/474/
Extract of my source code:
我的源代码摘录：
$('a').click(function(){
var object = $(this);
object.parent().parent().addClass('deleteHighlight', 1000, function() {
$(this).find('td').each(function(index, element) {
// Wrap each td inside the selected tr in a temporary div
$(this).wrapInner('<div class="td_wrapper"></div>');
// Fold the table row
$(this).parent().find('.td_wrapper').each(function(index, element) {
// SlideUp the wrapper div
$(this).slideUp();
// Remove padding from each td inside the selected tr
$(this).parent().parent().find('td').each(function(index, element) {
$(this).animate({
'padding-top': '0px',
'padding-bottom': '0px'
}, function() {
object.parentsUntil('tr').parent().remove();
});
});
});
回答by Myke Black
The problem with animating table rows is that it has a display type of table-row, and you cannot simply change it to display:block because that will mess up the table structure. what you need to do is wrap the td contents in divs as in GianPero's answer, then slide those up, and the row height will automatically reduce with them. This code is a more simple version and will work on rows containing th tags as well as td.
动画表格行的问题在于它具有表格行的显示类型，您不能简单地将其更改为 display:block 因为这会弄乱表格结构。您需要做的是像 GianPero 的回答一样将 td 内容包装在 div 中，然后将它们向上滑动，行高将随之自动降低。这段代码是一个更简单的版本，可以处理包含 th 标签和 td 的行。
var fadeSpeed = 400;
var slideSpeed= 300;
var row = $(this).parent().parent();
row.fadeTo(fadeSpeed, 0.01, () => {
row.children('td, th')
.animate({ padding: 0 })
.wrapInner('<div />')
.children()
.slideUp(slideSpeed, () => { row.remove(); });
});
You can modify the fadespeed and slidespeed to any duration in milliseconds or you can set them to jquery constants like 'slow' or 'fast'
您可以将fadespeed 和slidespeed 修改为以毫秒为单位的任何持续时间，也可以将它们设置为jquery 常量，如“slow”或“fast”
Row animation code inspired by Animating Table Rows with jQuery
受jQuery 动画表格行启发的行动画代码
回答by Myke Black
For some reason, the wrapInner() with div didn't work for me, so I've made a less elegant solution, where you animate the font-size of the row, then hide it, then restore the font size to normal while the row is invisible.
出于某种原因，带有 div 的 wrapInner() 对我不起作用，所以我做了一个不太优雅的解决方案，您可以为行的字体大小设置动画，然后隐藏它，然后将字体大小恢复为正常，同时该行是不可见的。
this.trs
.animate({ 'fontSize': '1px' }, 70)
.slideUp(1)
.animate({ 'fontSize': '12px'}, 10)
;
I use this for animating collapse/expand resource groups in fullcalendar.js + scheduler.js calendar views.
我使用它来为 fullcalendar.js + scheduler.js 日历视图中的折叠/展开资源组设置动画。
