Cloning a set of elements and form fields - Jquery

I have a table with various elements that I need to have cloned on click. I am trying to do this using jQuery. I have attached an image.

The first top part where Ingredients are on the "add more" link that  WHOLE section including the button part in the gray box would be cloned.

Then the last piece would be the GRAY part below, each time you clicked add more to the right, another box would appear below.

I have tried various methods and its becoming a mess and am sure there is a better way, performance wise to do this. I have my code here:

 
<table border="0" width="600" class="pga_toggle_ingredients">
                <tbody><tr height="15">
                    <th width="60" scope="col">Ingredient Name</th>
                    <th scope="col">Qty</th>
                    <th scope="col">UOM</th>
                    <th width="70" scope="col">% Ingredient</th>
                    <th scope="col"></th>
                </tr>
                <tr height="15">
                    <td width="80"><img class="pgaDeleteIcon" alt="Delete" src="/Images/icon_delete.gif">
                        <input type="text" value="ing1" id="" name="" maxlength="50" class="{alphanum:true} pgaInputName valid"></td>
                    <td width="30"><input type="text" value="100" id="" name="" class="{digits:true} pgaInput valid"></td>
                    <td width="40"><input type="text" value="KG" id="" name="" class="pgaInput valid"></td>
                    <td width="56"><input type="text" value="0" id="" name="" maxlength="3" class="{digits:true} pgaInput valid"></td>
                    <td width="96"><a class="pga_add_ingredient" href="#">Add More</a></td>
                </tr>
                <tr class="pga_toggle_component" id="pga_ingredient_comp_no_0">
                    <td colspan="6"><h4>Related Components</h4>
                        <table border="0" width="429" class="pga_table_component">
                            <tbody><tr>
                                <th scope="col">Genus Name</th>
                                <th scope="col">Species Name</th>
                                <th scope="col">Type Code</th>
                                <th scope="col">Country</th>
                                <th></th>
                            </tr>
                            <tr>
                                <td><img class="pgaDeleteIcon" alt="Delete" src="/Images/icon_delete.gif">
                                    <input type="text" value="gen1" id="" name="" class="pgaInputName valid"></td>
                                <td><input type="text" value="spec1" id="" name="" class="{alphanum:true} pgaInputName valid" maxlength="25"></td>
                                <td><input type="text" value="HRV" id="" name="" class="{alphanum:true} pgaInput" maxlength="25"></td>
                                <td><input type="text" value="CA" id="" name="" class="pgaInput"></td>
                                <td><a class="pga_add_ingredient" href="#">Add More</a></td>
                            </tr>
                        </tbody></table></td>
                </tr>
            </tbody></table>

Open in new window


Thanks!

 Cloning
LVL 1
catonthecouchproductionsAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
SRigneyConnect With a Mentor Commented:
When cloning this much at once, I find it easiest to have a hidden template on the page.  Then when the link is clicked a new copy of the template is inserted into the location in relation to the clicked link.  Otherwise you have to deal with removing data from the page.    You could build the template completely in script if you want, but I've used hidden fields.  In order to keep the hidden fields from messing up the array of inputs that are submitted I hide them outside the form, so they are not included in the serialized data.

In order to get the location of where the clicked link is will use the .parent() method on the obect.

$("a.pga_add_ingredient").click( function() {
  // get the row, which is 2 parents above the link clicked.
  ingredient = $(this).parent().parent();  
  // get the details which is the next row (sibling) of the ingredients.
  detail = ingredient.siblings(0);

  data = // clone template
  detail.after(data) // insert the clone after the detail line.
     
});

I'd do the same thing for the details that you have, only I'd give it a different class name because it needs to clone a different object, and it is at a different parent depth that it needs to insert.
0
All Courses

From novice to tech pro — start learning today.