jQuery克隆不复制选项值

时间:2013-01-03 06:16:48

标签: jquery clone

我想克隆一个HTML表行,并使用jQuery动态地将新行添加到表的末尾。此行有许多下拉控件。我正在尝试克隆该行。大多数控件都会被复制,但选项的值不会被复制。所以我试着明确设置选项值。那也行不通。

//original table row and its clone
var $tr = $("tr.RowToBeCopied").last();
var $clone = $tr.clone();

var originalSelects = $tr.find("select");
    $(originalSelects).each(function (i) {
        var select = this;
        var originalOptions = $(select).find("option");

        $(originalOptions).each(function (j) {
            var originalOption = this;
            $($clone.find("select").eq(i))
                .find("option").eq(j)
                    .val($(originalOption).val());
        });
    });

$tr.after($clone);

我尝试通过以下代码将其设置为属性 - >

var originalSelects = $tr.find("select");
    $(originalSelects).each(function (i) {
        var select = this;
        var originalOptions = $(select).find("option");

        $(originalOptions).each(function (j) {
            var originalOption = this;
            $($clone.find("select").eq(i))
                .find("option").eq(j)
                    .attr("title", $(originalOption).val());
        });
    });

此处,'title'属性设置正确。但如果我将'title'更改为'value',则不会设置值。

有人可以建议一种方法让这个工作吗?

1 个答案:

答案 0 :(得分:2)

所有你需要的是:

var $tr = $("tr.RowToBeCopied").last();
$tr.clone().insertAfter($tr);

clone执行所有元素和文本节点的深层复制,您不必重置值。这是一个例子。 http://jsfiddle.net/8bhfR/