克隆选择与其他输入标签？

Question

我正在尝试克隆表行并生成一个带有id的数组，因为用户可以插入n行。我面临的问题是我在该表行中有1个选择下拉选项。如何克隆一个选择以及一行中的其他输入标签？ （这段代码一次生成2组行，两个appendTo（）的coz。感谢您的帮助！

$("#add").click(function() {
    $("#comTable tr:eq(0)").clone().find("input").each(function() {
        // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
        $(this).val('').attr('id', function(_, id) {
            return id + 'N' + '[' + i + ']'
        });
        $(this).val('').attr('name', function(_, name) {
            return name + 'N' + '[' + i + ']'
        });
    }).end().appendTo("#comTable");

    $("#comTable tr:eq(0)").clone().find("select").each(function() {
        // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
        $(this).val('').attr('id', function(_, id) {
            return id + 'N' + '[' + i + ']'
        });
        $(this).val('').attr('name', function(_, name) {
            return name + 'N' + '[' + i + ']'
        });
    }).end().appendTo("#comTable");
    i++;
});​

Answer 1

您可以选择input和select元素，如下所示：

旧代码：

$("#comTable tr:eq(0)").clone().find("input").each(function() {
    // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
    $(this).val('').attr('id', function(_, id) {
        return id + 'N' + '[' + i + ']'
    });
    $(this).val('').attr('name', function(_, name) {
        return name + 'N' + '[' + i + ']'
    });
}).end().appendTo("#comTable");

$("#comTable tr:eq(0)").clone().find("select").each(function() {
    // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
    $(this).val('').attr('id', function(_, id) {
        return id + 'N' + '[' + i + ']'
    });
    $(this).val('').attr('name', function(_, name) {
        return name + 'N' + '[' + i + ']'
    });
}).end().appendTo("#comTable");

新守则：

$("#comTable tr:eq(0)").clone().find("input, select").each(function() {
    // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
    $(this).val('').attr('id', function(_, id) {
        return id + 'N' + '[' + i + ']'
    });
    $(this).val('').attr('name', function(_, name) {
        return name + 'N' + '[' + i + ']'
    });
}).end().appendTo("#comTable");

请注意"input, select"选择器。

修改

你能做到的另一种方式，如果你想以不同的方式处理select，则链接方式不同：

$("#comTable tr:eq(0)")
    .clone()
    .find("input")
    .each(function() {
            // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
            $(this).val('').attr('id', function(_, id) {
                return id + 'N' + '[' + i + ']'
            });
            $(this).val('').attr('name', function(_, name) {
                return name + 'N' + '[' + i + ']'
            });
        })
    .end() //End .find("input")
    .find("select")
    .each(function() {
            // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
            $(this).val('').attr('id', function(_, id) {
                return id + 'N' + '[' + i + ']'
            });
            $(this).val('').attr('name', function(_, name) {
                return name + 'N' + '[' + i + ']'
            });
        })
    .end() //End .find("select")
    .appendTo("#comTable");
i++;

这样就删除了额外的克隆，并在新克隆的DOM元素上再次运行.find。