jQuery 向上滑动表格行

Question

我正在构建一个自定义 jQuery 插件，它允许用户实时删除表中的记录，等等。当记录被删除时，我希望被删除的表格行的背景颜色变为红色，然后向上滑出视图。

下面是我的代码的 sn-p，它不做任何颜色变化的动画，也不上滑行。但是，当应该是上滑动画完成时，它会删除该行。查看以下代码时需要了解的一些事项：

1. “object”变量是对被单击并触发删除操作的对象的 jQuery 引用。
2. “object.parent().parent()”对象是被删除的行。
3. “deleteHighlight”CSS 类包含将行变为红色的颜色。
4. “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();
  });
});

这是正在执行的 HTML，没什么特别的：

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</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>

有人可以举例说明我如何解决这个问题吗？

感谢您的宝贵时间。

Answer 1

function rowSlideUp(e,time) {
  if (!time) { time = 200; }
  var row = $(e).parents("tr").eq(0);
  var height = row.innerHeight();
  row.stop().css({transition:"none",opacity:1}).animate({opacity:0}, 120, function(){
                var that = $(this);
                $(this).find("td, th").css({padding:0}).html('<div class="animate-row" style="height:' + height + 'px;padding:0">&#160;</div>');
                $(this).find(".animate-row").slideUp(time, function(){
                    that.remove();
                });
            });
  return false;
}

table { 
  border-collapse: collapse;
  border-spacing: 0;
  width:100%; 
}
td,th { 
  padding:9px 12px; 
  font-size:16px; 
  background: #fff;
  color:#000;
  border: #DEE2EE 1px solid;
}
td {
  background:#fff;
}
th {
  background:#F3F5Fa;
}
td[tabindex] { cursor:pointer; outline:none; }
td[tabindex]:active { color:#ff3300; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<table>
  <tr><th>Title</th><th>X</th></tr>
  <tr><td>cell 1</td><td tabindex="-1" onclick="rowSlideUp(this,300)">click</td></tr>
  <tr><td>cell 2</td><td tabindex="-1" onclick="rowSlideUp(this,300)">click</td></tr>
  <tr><td>cell 3</td><td tabindex="-1" onclick="rowSlideUp(this,300)">click</td></tr>
</table>

Answer 2

动画表格行的问题在于它的显示类型为表格行，您不能简单地将其更改为 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(); });
});

您可以将淡入淡出速度和滑动速度修改为以毫秒为单位的任何持续时间，也可以将它们设置为 jquery 常量，例如“慢”或“快”

受Animating Table Rows with jQuery启发的行动画代码

Answer 3

当然可以！

将要向上滑动的 tr 的每个 td 包装到一个 div 中，然后向上滑动这些 div！

当然，您必须为每个 td 的填充（顶部和底部）设置动画。

你可以在这里找到一个完整的例子：

http://jsfiddle.net/3t3Na/474/

我的源代码摘录：

$('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();
        });
    });
});

Answer 4

由于某种原因，带有 div 的 wrapInner() 对我不起作用，所以我做了一个不太优雅的解决方案，您可以为行的字体大小设置动画，然后隐藏它，然后恢复字体大小正常，而该行是不可见的。

    this.trs
        .animate({ 'fontSize': '1px' }, 70)
        .slideUp(1)
        .animate({ 'fontSize': '12px'}, 10)
        ;

我用它来为 fullcalendar.js + scheduler.js 日历视图中的折叠/展开资源组设置动画。

Answer 5

处理滑动和移除最优雅的方法是用div 包裹每个td 的内部内容，同时减少td 的填充和divs 的高度.看看这个简单的演示：http://jsfiddle.net/stamminator/z2fwdLdu/1/

Answer 6

addClass 不接受回调函数，因为它立即执行。我想你可能想要更多这样的东西。

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
}); 

Answer 7

我怀疑这部分是浏览器问题。 您不应该真正针对<tr />，因为浏览器对它们的解释不同。此外，它们的行为与块元素不同。

在此示例中：http://jsfiddle.net/lnrb0b/3t3Na/1/ 您的代码部分在 chrome 中工作。 <tr /> 允许设置样式（与某些 IE 版本不同），但您不能为其设置动画。如果你做到了display:block，不用担心，但它作为一张桌子有点垃圾:)

在这个例子中：http://jsfiddle.net/lnrb0b/3t3Na/2/ 你会看到我已经为<td /> 设置了动画，但它们几乎没有工作，而且速度很慢。

对这些进行测试，同时我会尝试考虑解决方案。