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

Question

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?

score 2 · Answer 1 · answered Jan 23 '13 at 17:20

2

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.

answered Jan 23 '13 at 17:20

jAndy

231,737
57
305
359

Thank you for your response but it seems that I can't make it work. It's probably because I didn't understand the logic here. How can you reattach a detached row using: $( 'table tr' ).eq( $noderef.data( 'index' ).after( $noderef ); when we detach the row and there's no $( 'table tr' ) to append it after? I've been trying to make it work as below: http://jsfiddle.net/YCdGQ/40/ – otinanai Jan 24 '13 at 10:26

score 0 · Accepted Answer · answered Jan 24 '13 at 14:55

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/

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

2 Answers2