克隆选择以及其他输入标记

Clone select along with other input tags?

本文关键字：输入 及其他 选择      更新时间：2023-09-26

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

$("#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++;
});​

您只需选择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。

相关文章：