Customizing JQuery Cloned row attributes

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 diffe开发者_如何学Gorent 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.

---

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;

---

Try this http://jsfiddle.net/EwQUW/3/

 // do Add button options
$("#Add").click(function() {
    var i = ($('#secondaryEmails >tbody >tr').length)+1;
    $("#secondaryEmails >tbody tr:first").clone().find("input,select").each(function() {
        //if(this).(':radio').
        $(this).attr({
            'id': function(_, id) {
                return id + i;
            },
            'name': function(_, name) {
                if($(this).attr("type") == "radio")
                    return name;
                return name + i;
            },
            'value': ''
        });
    }).end().appendTo("#secondaryEmails >tbody").show();
});
// do update button options
$("#update").click(function() {
    // find and display selected row data
    alert('in Update');
    var rowCount = $('#secondaryEmails >tbody >tr').length;

});
// do row double click options
// do row selected by either focusing on email or ship type elements