删除表行生效

Question

在this page 上，如果您单击第一行 (Madonna) 上的取消订阅按钮，下面的行会很好地向上滑动。但是，如果您随后删除新的第一行 (Radiohead)，则剩余行 (U2) 上的图像会在该行移动到位后令人不快地跳到左侧。执行表行删除调用的函数是：

SF.deleteRow = function(selector) {
    $(selector)
        .children('td, th')
        .animate({ paddingTop: 0, paddingBottom: 0 })
        .wrapInner('<div />')
        .children()
        .slideUp('slow', function() {
            $(this).closest('tr').remove();
        });
};

如果我删除表格单元格中的所有填充，这个问题就会消失，但是我没有填充.....

有没有办法解决这个问题？或者，在删除避免此问题的表行时，我是否可以应用另一种效果（我不希望在单击“取消订阅”按钮时该行立即消失）。

Answer 1

您提到的跳转发生是因为当较长的文本“Radiohead”被删除时第一列会缩小，而较短的文本“U2”是定义第一列中单元格宽度的唯一因素。这个问题可以通过在表格中固定列宽来解决。

Answer 2

我建议只用 div 而不是用表格来制作它。然后你可以很容易地做到这一点：

<style>
    .row {
        float: left;
        width: 990px;
        overflow: hidden;
    }
        .row  .col {
            float: left;
            width: 490px;
        }
            .row  .col.first {
                width: 200px;
            }
            .row  .col.last {
                width: 300px;
            }

</style>

<script type="text/javascript">
    [...]
    SF.deleteRow = function(selector) {
        $(selector)
            .find('.row')
            .animate({ height: 0 },"fast", "linear", function() {
                $(this).remove();
            });
    };
    [...]
</script>

<div class="row even">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>
<div class="row odd">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>
<div class="row even">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>
<div class="row even">
    <div class="col first">[....]</div>
    <div class="col">[....]</div>
    <div class="col last">[....]></div>
</div>

这只是一个例子。由于row 类的溢出是隐藏的，所以当高度为0时它不会显示任何内容。

如果你只是想用一张桌子，那就有点难了！

这个答案只是建议使用 div 而不是表格。我也喜欢使用 css 浮动，因为它更容易在元素上制作动画而不是非浮动对象（我认为）。

Answer 3

这个解决方案看起来非常复杂......为什么不只是将容器的溢出设置为“隐藏”并缩小容器的高度。 ..

编辑:: 谢谢@Derek 向我指出边界仍然存在......让我再次查看我的代码并注意到一个但是。回调函数应该是$(this).remove();，仅此而已。

see here 举个例子。