刪除表格行

Question

在此頁面上 ，如果單擊第一行（“麥當娜”）的“取消訂閱”按鈕，則下面的行會合理地向上滑動。 但是，如果您隨后刪除新的第一行（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(); 這就是全部。

請參閱此處的示例。