Adding Duplicate Row After Removing Rows from the Duplicate

Question

enter image description here I am trying to add a new row to the table. The new row is duplicate of the next row with few changes. The new row would remove all the rows in the nested table but the first row. I have created a JSFiddle link where you can find more details and the code:

http://jsfiddle.net/rL5aZ/1/

var rowId = $("#menu").attr("rowId");

    var currentRow = $("#" + rowId);

    var rowToBeAdded = currentRow.next();
    rowToBeAdded.clone().insertAfter(currentRow)
    .find(".TBLCONTENTS:not(:first),.TBLALTCONTENTS:not(:first)").remove();

For some reason the following works but the above does not:

 rowToBeAdded.clone().insertAfter(rowToBeAdded).find(".TBLCONTENTS:gt(0),.TBLALTCONTENTS:gt(0)").remove();

ori · Accepted Answer · 2012-02-11 17:08:54Z

1

This was your code:

var currentRow = $("#moduleRow");
var rowToBeAdded= $("#moduleRow").next().find(".content").not(":first").remove().find(".altcontent").not(":first").remove();
$(currentRow).after(rowToBeAdded);

You need to .clone() the elements you want to duplicate, otherwise inserting/appending it will only move it.
Your table structure was missing a td (you had <table><tr><table>, should be <table><tr><td><table>)
.find(".content").not(":first").remove().find(".altcontent") will first remove all .content other than the first and then try to find .altcontent inside the first .content, which is probably not what you want. You can use .end() to go back to the previous jquery object
You were inserting the updated row after $('#moduleRow'), where it should've been inserted after the original row ($('#moduleRow').next())

var currentRow = $("#moduleRow").next();
var rowToBeAdded = currentRow.clone()
    .find(".content:not(:first),.altcontent:not(:first)").remove().end()
    .insertAfter(currentRow);

See http://jsfiddle.net/orig/rL5aZ/4/

EDIT

Actually it can be simpler:

var currentRow = $("#moduleRow").next();
currentRow.clone().insertAfter(currentRow)
    .find(".content:not(:first),.altcontent:not(:first)").remove();

answered Feb 11, 2012 at 17:08

ori

7,8571 gold badge29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

azamsharp Over a year ago

Thanks for your answer and it works perfectly in JSFiddle but for some reason in my application it removes all the .content and altcontent rows and insert empty rows. I have attached a screenshot of the html code.

ori Over a year ago

Should be rowToBeAdded.clone().insertAfter(rowToBeAdded)

azamsharp Over a year ago

Thanks I changed the code but for the newly added rows for some reason the tBody is always empty! Seems like it removed all the rows for some reason.

Collectives™ on Stack Overflow

Adding Duplicate Row After Removing Rows from the Duplicate

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related