Question

我一直在研究JQuery方式动态添加表行。一个很好的主题是：How to Copy Table Row with clone in jquery and create new Unique Ids for the controls，最后一个例子是我在这篇文章中定位的那个。

I have a fiddle举例说明我要做的事情。这个小提琴还没有完全奏效，但我正在努力，

我遇到的主要问题是获取表行副本以设置不同类型的列元素id和默认值，甚至行属性。从本质上讲，我如何将其扩展为更强大。

感谢Nick Craver，我正在尝试使用它：

// 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");
});

会很好地复制和插入一行，但如果我有一个带有单选按钮，输入框和选择列表的行，我无法弄清楚如何告诉它根据类型设置每个元素的默认值元素。我正在尝试使用模板行，但这意味着我需要在style:display到none的行上设置table-cell属性。又如何？

请参阅前面提到的小提琴作为工作示例。

Answer 1

现在显示行：http://jsfiddle.net/EwQUW/5/

您希望在元素上使用.show()来显示它，这有效地将样式设置为display:block而不是display:none;

Answer 2

试试这个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

自定义JQuery克隆的行属性

2 个答案: