我试图添加一行到一个表,并有一行滑进视图,但滑动功能似乎是添加一个显示:块样式的表行,这打乱了布局。

有什么解决办法吗?

代码如下:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

当前回答

如果你需要同时滑动和淡出一个表行,尝试使用这些:

jQuery.fn.prepareTableRowForSliding = function() {
    $tr = this;
    $tr.children('td').wrapInner('<div style="display: none;" />');
    return $tr;
};

jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
    $tr = this;
    if ($tr.is(':hidden')) {
        $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    } else {
        $tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
            $tr.hide();
            callback();
        });
    }
    return $tr;
};

$(document).ready(function(){
    $('tr.special').hide().prepareTableRowForSliding();
    $('a.toggle').toggle(function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Hide table row');
        });
    }, function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Display table row');
        });
});
});

其他回答

我回答这个问题有点落后了,但我找到了一种方法来做到这一点:)

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

我只是在表格数据标记中放了一个div元素。当它被设置为可见时,随着div展开,整行就会下降。 然后告诉它渐隐(然后超时,以便您看到效果),然后再次隐藏表行:)

希望这能帮助到一些人!

我喜欢Vinny写的插件,并一直在使用。但是对于在滑动行(tr/td)内的表,即使在滑动后,嵌套表的行始终是隐藏的。所以我做了一个快速和简单的hack在插件不隐藏行嵌套表。只要改一下下面这行

var $cells = $(this).find('td');

to

var $cells = $(this).find('> td');

它只找到直接的TDS而不是嵌套的。希望这有助于使用插件和嵌套表的人。

有一个表行嵌套表:

<tr class='dummyRow' style='display: none;'>
    <td>
        <table style='display: none;'>All row content inside here</table>
    </td>
</tr>

向下滑动行:

$('.dummyRow').show().find("table").slideDown();

注意:行和它的内容(这里是“table”)都应该在动画开始之前被隐藏。


上滑行:

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

第二个参数(function())是一个回调。


简单! !

请注意,还有几个选项可以添加为滑动上/下函数的参数(最常见的是“慢”和“快”的持续时间)。

在表行上不支持动画。

来自Chaffer和Swedberg的“学习jQuery”


表行显示特定的 动画的障碍,因为浏览器 使用不同的值(table-row和 块)用于它们的可见显示 财产。.hide()和.show() 方法,没有动画,总是 用于表行是安全的。的 jQuery 1.1.3版本,.fadeIn()和 . fadeout()也可以使用。


你可以把td的内容包装在一个div中,并在上面使用滑动。您需要决定动画是否值得额外的标记。

快速、简单的解决办法:

使用JQuery .toggle()显示/隐藏行点击或锚。

需要编写一个函数来识别想要隐藏的行,但是toggle可以创建您正在寻找的功能。