CODEWITHSUNDEEP
jqueryappenddetach
otinanai
otinanai

Reputation: 4023

How to append all detached rows back to their initial place?

I want to detach a row from a table after a button is clicked. However, I cannot manage to append it back to where it was. I ended up with the code below to detach the row that the "delete" button belongs to:

$(".removeTR").live('click', function (event) {
$(this).closest('tr').fadeTo(400, 0, function () {
    $(this).detach();
});
return false;
});

The problem gets more complicated when I need to detach more than one row and then append them all with a "reset" button. Can you please make any suggestions or direct me to the proper logic?

Upvotes: 0

Views: 269

Answers (2)

otinanai
otinanai

Reputation: 4023

I managed to make it work exactly the way I wanted utilizing show() and hide(). This way I didn't have to worry about positioning. However I have concerns over the performance when dealing with a huge number of table rows. 

var trItems = $("table tr").length;
$(".resetALL").hide();

$(".removeTR").live('click', function (event) {
    $(".resetALL").fadeIn("slow");
    $(this).closest('tr').fadeOut("normal");
    var trHidden = $("table tr:hidden").length+1;
    var trRemains = trItems - trHidden;
    if (trRemains <= 3) {
        $("span").text("You must have at least " + (trRemains-1) + " products in the comparison table.");
        $(".removeTR").fadeOut("normal");
    }
});

$(".resetALL").live('click', function (event) {
    $("table tr:hidden").fadeIn("slow");
    var trItems = $("table tr").length;
    $(".removeTR").fadeIn("slow");
    $("span").text("This is the span.");
    $(".resetALL").fadeOut("normal");
});

You can see my working example below: http://jsfiddle.net/YCdGQ/51/

Upvotes: 0

jAndy
jAndy

Reputation: 236122

You could store the index of the node within the <table> like

$(this).closest('tr').fadeTo(400, 0, function () {
    var $this = $( this );

    $this
        .data( 'index', $this.index() )
        .detach();
});

..and later, re-insert like

$( 'table tr' ).eq( $noderef.data( 'index' ).after( $noderef );

Note that the stored index will be a static value. That means if there are rows added or removed in the meantime, we would just re-insert that row at the index it had, at this time.

Upvotes: 2

Related Questions