How to clone and append a table row

Question

I have a table that looks like this:

When the user clicks on the + button I am trying to copy the row shown and append it below, but also with a remove link so something like this after the Component Thickness column.

<td><a href='#' id='remove'>Remove</a></td>

Only anything after the first row should include this remove link.

HTML

<table id="component_table">
    <thead>
        <tr>
            <th>Component</th>
            <th>Component Type</th>
            <th>Component Thickness</th>
        </tr>
    </thead>
    <tbody id="component_tb">
        <tr>
            <td><?php echo $roofComponentDropDown ?></td>
            <td><?php echo $roofComponentTypeDropDown ?></td> 
            <td><input id="component_thickness" name="component_thickness" type="text"></td>
        </tr>
    </tbody>
</table>
<input type="button" value="+" id="addRows" />

The drop downs are being generated in PHP and the data I am using for the options are queried out of a database, if you want to see how I am doing this (I don't think it matters) I can make an edit and include the code.

Here is what I have so far in regards to JQuery

JQuery

$(function() {
    $("#addRows").click(function() {
        $("#component_tb").append("<tr><td>new row</td>  <td>new row</td>  <td>new row</td> <a href='#' id='remove'>Remove</a> </tr>");
    });
});

This appends another row to my table but obviously doesn't include my dropdowns, nor does it add a remove link.

I have tried $("#component_tb").clone().appendTo("component_tb"); just to try to see if I can get the cloning of my row (without adding a remove link) to work, but when I clicked my button nothing at all happens.

Any help would be awesome,

Thanks

Answer 1

In what you tried, you forgot to include the # before the ID, that's why it didn't work, but still it would've appended the entire element to itself, causing all sorts of issues.

What you need to clone is the first <tr> .

$(function() {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $componentTB.children('tr').first().clone();
    $("#addRows").click(function() {
        $componentTB.append($firstTRCopy.clone());
    });
});

The double- .clone() is needed because the element stored in $firstTRCopy would get appended permanently otherwise, and in case it's removed from the DOM, you'll not get anything when you try to append it again. This way, it can be cloned every time it's needed.

---

In your code you have a text input with the ID component_thickness . While this code in itself will not cause duplicate IDs to appear, you will need to edit that input and get rid of the ID, probably making it a class.

Answer 2

Try this This will clone a table

$("input.tr_clone_add").live('click', function() {
var $tr    = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
});