jQuery向上滑动表行

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

在这个例子中:http://jsfiddle.net/lnrb0b/3t3Na/1/你的代码部分在chrome中工作。<tr />允许样式(不像在一些IE版本)，但你不能动画它。如果你让它display:block不用担心，但它有点垃圾作为一个表:)

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

测试一下，同时我会试着想出一个解决方案。

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

当然可以!

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

当然，你必须动画的填充(顶部和底部)每个td。

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

我的源代码摘录:

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

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

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

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

你可以修改fadesed和slidesed以毫秒为单位的任何持续时间，或者你可以将它们设置为jquery常量，如'slow'或'fast'

行动画代码，灵感来自于用jQuery动画表行

由于某种原因，带div的wrapInner()不适合我，所以我做了一个不太优雅的解决方案，在这里您将行的字体大小动画化，然后隐藏它，然后在行不可见的情况下将字体大小恢复为正常。

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

我用它在fullcalendar.js + scheduler.js日历视图中显示折叠/展开资源组。

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>