Implementing a slide down for table rows

问题:

I am trying to implement a slide down for table rows using the previous post here

I have a newrole table where I click on add icon and it gets added to rolecart table with 3 rows for each item. First row is copied as it is from the role table the next 2 rows are added using jQuery, below is the code.

$("#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); }); 

When I add next item to the cart I want the previous item's last 2 rows to slide up (I will later provide and icon to slide down to show these rows)

Need to know how to implement this. more specifically I need to know how do I select previous cart items last 2 rows and then apply the slideup to the divs.

回答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();     }); }); 

文章来源: Implementing a slide down for table rows