Customizing JQuery Cloned row attributes
<p>I have been researching the JQuery way to add table rows dynamically. One excellent thread is: <a href="http://stackoverflow.com/questions/3504499/how-to-copy-table-row-with-clone-in-jquery-and-create-new-unique-ids-for-the-cont">How to Copy Table Row with clone in jquery and create new Unique Ids for the controls</a>, with the last example being the one I am targeting in this post.</p>

<p><a href="http://jsfiddle.net/radi8/EwQUW/1/" rel="nofollow">I have a fiddle</a> giving an example of what I am trying to do. This fiddle does not work exactly yet, but I am working on it,</p>

<p>The main issue I am having is getting the table row copy to set different types of column elements id and default values, and even row attributes. In essence, how do I extend this to be more robust.</p>

<p>Thanks to Nick Craver, I am trying to use this:</p>

<pre><code>// do Add row options
$("#Add").click(function() {

    var rowCount = $('#secondaryEmails &gt;tbody &gt;tr').length;
    var i = rowCount + 1;
    alert('rowCount: ' + rowCount + ', new row: ' + i);
    $("#secondaryEmails &gt;tbody tr:first").clone().find("input").each(function() {
        $(this).attr({
            'id': function(_, id) {
                return id + i
            },
           'name': function(_, name) {
                return name + i
            },
            'value': ''
        });
    }).end().appendTo("#secondaryEmails &gt;tbody");
});
</code></pre>

<p>which will copy and insert a row nicely, but if I have a row with a radio button, input box, and select list, I cannot figure out how to tell it to set the default value of each element depending on the type of element. I am trying to use a template row, but that means I need to set the <code>style:display</code> attribute on the row from <code>none</code> to <code>table-cell</code>. Again, how?</p>

<p>Please see the fiddle mentioned previously for a working example.</p>
