javascript - 实现表格行的向下滑动

Question

我正在尝试使用上一篇文章 here 实现表格行的向下滑动

我有一个 newrole 表，我在其中单击添加图标，它被添加到 rolecart 表中，每个项目有 3 行。第一行是从 Angular 色表中复制的，接下来的两行是使用 jQuery 添加的，下面是代码。

$("#table_newrole img.move-row").live("click", function() {
    var tr = $(this).closest("tr").remove().clone(); 
    tr.find("img.move-row")
        .attr("src", "/gra/images/icons/fugue/cross-circle.png")
        .attr("alt", "Remove");

    // first row copied from the source table as it is
    $("#table_rolecart tbody").append(tr); 

    // next two rows added like this
    var $inputtr = $('<tr><td colspan="3">Business Justification: &nbsp;<input type="text" id="ar_businessjust"></td></tr><tr><td colspan="2">Start Date: <input type="text" id="ar_startdate"></td> <td colspan="1">End Date: <input type="text" id="ar_enddate"></td></tr>');

    $("#table_rolecart tbody").append($inputtr);
});

当我将下一个项目添加到购物车时，我希望上一个项目的最后 2 行向上滑动(稍后我将提供一个向下滑动的图标以显示这些行)

需要知道如何实现它。更具体地说，我需要知道如何选择最后 2 行的以前的购物车项目，然后将向上滑动应用到 div。

Answer 1

http://jsfiddle.net/TJ4gt/1

//wrap table data in divs
$('tr').not(':first').children('td').wrapInner('<div>');

//slide up spans, then slide up tds in callback
$('button').click( function() {
    $('td > div').slideUp(1000, function() {
        $(this).parent().slideUp();
    });
});