Question

在this page上，如果您单击第一行（麦当娜）上的取消订阅按钮，则下方的行会合理地滑动。但是如果你然后删除新的第一行（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而不是table ..我也喜欢使用css浮点数，因为它更容易在元素上制作动画然后是非浮动的对象（我的意见）。

Answer 3

所以在完全复杂的情况下......没有将容器的溢出“隐藏”并缩小容器的高度。 ..

编辑::谢谢你@Derek向我指出边界仍然存在......让我再次看着我的代码并注意到了一个但是。回调函数应为$(this).remove();，这就是全部。

see here举个例子。

删除有效的表格行

3 个答案: