jQuery滑动收起表格行

Question

我正在构建一个自定义的jQuery插件，其中包括实时删除表格中的记录等许多功能。当记录被删除时，我希望其行的背景颜色变为红色并向上滑动消失。

以下是我的代码片段，它没有执行任何颜色变化动画，也没有将行向上滑动。然而，当应该执行向上滑动动画时，它确实删除了该行。在查看下面的代码时需要知道一些事情:

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>

能否提供一个示例来帮我解决这个问题？

感谢您的时间。

- Oliver Spryn

Answer 1

我怀疑这在某种程度上是浏览器的问题。 你不应该真正地针对 <tr />，因为浏览器会以不同的方式解释它们。此外，它们的行为与块级元素不同。

在这个例子中：http://jsfiddle.net/lnrb0b/3t3Na/1/，你的代码在 chrome 中部分工作。 <tr /> 允许样式（与某些 IE 版本不同），但无法进行动画处理。如果将其设置为display:block，就没有问题了，但这时作为表格就有些糟糕 :)

在这个例子中：http://jsfiddle.net/lnrb0b/3t3Na/2/，你会发现我已经对<td />进行了动画处理，但效果甚微，而且速度非常缓慢。

测试一下这些内容，同时我会想到一个解决方案。

- Stuart Burrows

---

谢谢，Inrbob。我在测试我的代码时发现了这种情况。看起来我将不得不放弃红色背景的想法，而是采用淡出或其他更适合跨浏览器的方法。好的例子！考虑到这个问题已经解决了！ - Oliver Spryn

很好，很高兴能帮上忙。似乎有很多人建议用<div />包装<tr />的内容-我认为这不太好。然而，这是一个棘手的问题-这里有一个潜在的解决方案示例：http://jsfiddle.net/lnrb0b/3t3Na/7/ - Stuart Burrows

Answer 2

处理滑动和删除的最优雅的方式是将每个的内部内容用

包装，并同时减少的填充和

的高度。请查看这个简单的演示：http://jsfiddle.net/stamminator/z2fwdLdu/1/。

- Jacob Stamm

---

非常好。现在你如何创建相反的效果？即显示一行，同时隐藏另一行。 - Vincent

@Vincent 我修改了演示，使其具有删除行和仅隐藏行的功能。隐藏的行会在任何其他行被隐藏后重新显示。我试图保持简单，但它本质上是复杂的，如果你有任何问题，请告诉我。http://jsfiddle.net/stamminator/z2fwdLdu/30/ - Jacob Stamm

Answer 3

当然可以！

将要上滑的每个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();
        });
    });
});

- Gianpiero Franchino

Answer 4

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

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

- Dutchie432

---

jQueryUI提供了一个带有回调的动画addClass方法。请查看此页面的源代码：http://jqueryui.com/demos/addClass/default.html - Oliver Spryn

我认为它不应该被踩，因为jQuery的文档（http://api.jquery.com/addClass/或http://docs.jquery.com/UI/Effects/addClass）中没有提到回调函数。虽然第二个链接显示可以接受持续时间，但我没有看到任何关于回调的提及。我也看到你的代码可以工作，所以显然它必须可以。你能否发布一个fiddle来调试我们自己查看哪些对象具有什么值等？只是告诉我们`object.parent().parent()`是行可以有几种方式理解。 - Dutchie432

感谢您查看这个问题，Dutchie。我尝试了这个想法的不同变体，发现如果我使用object.parent().parent().children()（这会选择删除行中的所有单元格），我可以为一个类设置动画效果，然后将其全部向上滑动。感谢您花时间帮忙解决这个问题，我会给您点赞。再次感谢！ - Oliver Spryn

实际上，您需要对您的帖子进行编辑。由于某种原因，StackOverflow要求您在我给您点赞之前这样做。（为什么？？？哈哈） - Oliver Spryn

Answer 5

表格行动画的问题在于它具有表格-行的显示类型，不能简单地将其更改为display:block，因为那样会破坏表格结构。你需要做的是将td内容包装在div中，如GianPero的答案所述，然后将它们向上滑动，行高度将自动缩小。这段代码是一个更简单的版本，适用于包含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 常量，例如 'slow' 或 'fast'

行动画代码灵感来自于 使用 jQuery 动画化表格行

- Myke Black

Answer 6

由于某些原因，使用div的wrapInner()对我没有起作用，所以我想出了一个不太优雅的解决方案，即先动画显示行的字体大小，然后隐藏它，再在行不可见时将字体大小恢复为正常大小。

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

我在fullcalendar.js + scheduler.js日历视图中使用它来实现折叠/展开资源组的动画效果。

- user6269864

Answer 7

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>

- IC-Winner

---

请解释您的代码是做什么的以及它如何实现。 - M-Chen-3