Question

I was wondering if it is possible to replicate a block of HTML directly under the other one.

I have a table, with a ‘add row’ button underneath it, when a user clicks the ‘add row’ button, i need it to replicate the following HTML

<tr style="height: 31px;">
<td style="background-color: #e4e4e4;">
    <select name="timetocall" id="timetocall" style="width: 159px; margin-left: 8px;">
        <option value="residential" selected>Residential</option>
    </select>       
</td>
<td style="background-color: #e4e4e4;">$ <input type="text" value="120,000.00" name="emailaddress" id="emailaddress" style="width: 151px;" maxlength="256"></td>
<td style="background-color: #e4e4e4;">$ <input type="text" value="420,000.00" name="emailaddress" id="emailaddress" style="width: 151px;" maxlength="256"></td>
</tr>

Is this possible at all?

Answer 1

Give the <tr> an ID, e.g. id="template", then:

$('#template').clone().removeAttr('id').appendTo('table > tbody');

You might also want to replace any IDs that will be cloned, such as id="timetocall" and replace them with classes, since all IDs should be unique.

---

Here’s a demo: http://jsfiddle.net/EGp6Q/.