Question

I have been researching the JQuery way to add table rows dynamically. One excellent thread is: How to Copy Table Row with clone in jquery and create new Unique Ids for the controls, with the last example being the one I am targeting in this post.

I have a fiddle giving an example of what I am trying to do. This fiddle does not work exactly yet, but I am working on it,

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.

Thanks to Nick Craver, I am trying to use this:

// do Add row options
$("#Add").click(function() {

    var rowCount = $('#secondaryEmails >tbody >tr').length;
    var i = rowCount + 1;
    alert('rowCount: ' + rowCount + ', new row: ' + i);
    $("#secondaryEmails >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 >tbody");
});

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 style:display attribute on the row from none to table-cell. Again, how?

Please see the fiddle mentioned previously for a working example.

Answer 1

This is now showing the row: http://jsfiddle.net/EwQUW/5/

You would want to use .show() on the element to show it, which effectively sets the style to display:block instead of display:none;