1

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.

Community
  • 1
  • 1
pri_dev
  • 11,315
  • 15
  • 70
  • 122
  • Looks to be a dup of this one - http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row – mrtsherman Dec 21 '11 at 02:21
  • Hi, I did look into it, have enclosed all content inside td in divs, now I need to slideup these divs so, I am thinking of having a class for this div and do that? – pri_dev Dec 21 '11 at 02:29
  • Yes, that will work. I'll post some example code for you. – mrtsherman Dec 21 '11 at 04:00

1 Answers1

6

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();
    });
});
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • Hi, Have just one last addition to this, how to make the slideup for previous 2 rows and not the current row, something like this should work $(this).prev().parent().slideUp(); this is fine, but what if there is a nested table inside a row and I want to slide up previous row which is a nested tables row inside the main table? – pri_dev Dec 21 '11 at 21:35
  • Just find the parent tr then. `$(this).parents('tr').prev('tr').slideUp();` – mrtsherman Dec 22 '11 at 04:01
  • I'm almost sorry to say how well this works. I use a slight variation, using `
    ` instead of just `
    `, which, in conjunction with the `max-height` trick, allows almost-pure-CSS transitions on row height (where a maximum expected height can be tolerated).     – harpo Jan 29 '15 at 18:56