Javascript jquery克隆选择中的元素

我想克隆一个选择并更新名称和id值。选择在

我可以不用桌子，但我的挑战是把克隆放在一个新的

以下是我的jquery：

$("#btnClone").bind("click", function () {

   // get the last SELECT which ID starts with ^= "tech_"
   var $tr = $('tr[id^="tr_"]:last');

   // get the last SELECT which ID starts with ^= "tech_"
    var $select = $('select[id^="tech_"]:last');

    // Read the Number from that SELECT's ID (i.e: 3 from "tech_3")
    // And increment that number by 1
    var num = parseInt( $select.prop("id").match(/\d+/g), 10 ) +1;

    // Clone it and assign the new ID (i.e: from num 4 to ID "tech_4")
    var $klon = $select.clone().prop('id', 'tech_'+num ).prop('name', 'tech_'+num );

    // Finally insert $klon wherever you want
    $tr.after("<tr><td>").after($klon).after("</td></tr>");
});

此代码将导致克隆到原始元素下方，而新元素和

之间没有任何内容。请在创建tr和td后尝试附加select元素

---

您应该创建元素，而不是附加html

var $klon = $select.clone().prop('id', 'tech_'+num ).prop('name', 'tech_'+num );
var newTr = $('<tr/>');
var newTd = $('<td/>');    

newTr.insertAfter($tr);        
newTr.append(newTd);
newTd.append($klon);

工作示例：

首先使用tr id添加tr和td，然后将select添加到新tr下的td中，如下所示

$("#btnClone").bind("click", function () {
    var $tr = $('tr[id^="tr_"]:last');
    var $select = $('select[id^="tech_"]:last');

    var num = parseInt($select.prop("id").match(/\d+/g), 10) + 1;
    var $klon = $select.clone().prop('id', 'tech_' + num).prop('name', 'tech_' + num);

    $tr.after($("<tr id=tr_" + num + "><td></td></tr>")); // change here
    $('#tr_' + num + ' td').append($klon); // change here 
});

尝试使用；另外，要包括克隆元素的子节点，请将true添加到.clonetrue，请参阅

$btnClone.onclick，函数{ //获取以“^=tech”开头的最后一个ID_ var$tr=$'tr[id^=tr\]：last'； //获取以“^=tech”开头的最后一个ID_ var$select=$'select[id^=tech\]：last'； //从该选择器的ID读取编号，即：3从tech_3读取 //然后将这个数字增加1 var num=parseInt$select.propid.match/\d+/g，10+1； //克隆它并分配新ID，即：从num 4到ID tech_4 var$klon=$select.clonetrue.prop'id'、'tech_'+num.prop'name'、'tech_'+num； //最后，将$klon插入到您想要的任何位置 $tr.after $, { 附加：${ 附加：$klon } } }; 请选择 芒果 苹果 香蕉 橙色

---

单击您使用的jQuery版本？这也许不是问题，但我已经很久没有看到使用bind了，我建议改为使用on，但这可能是我个人的熟悉度和偏好。顺便问一下，您是否使用了所有这些id属性？看来你让自己的生活很艰难。顺便问一下，你的按钮在哪里？在世界之外的某个地方？您是有意克隆特定元素，还是仅克隆最后一个元素？每当我看到像$[id^=xxx_u]这样的选择器时，都表明您应该使用一个类。我已经在这个问题中添加了按钮代码。它是在原始代码中。我想克隆最后一个元素，用户可以添加任意数量的元素，每个元素都有一个唯一的id。@BrianG我们必须添加。结束返回链。现在检查答案/Firebug显示内部和，但不显示内部。此外，如果未添加true，则第二次单击Clone按钮将在原始和第一次克隆之间进行第三次选择。克隆元素的克隆子元素将不会被删除cloned@guest271314我没听说过这样的事。如果通过true，则将被视为硬克隆。因此，在克隆过程中，元素中存在的数据以及与元素绑定的事件也将被复制。谢谢帮助。还将原来的jquery行更改为并修改了两行：var$tr=$'tr[class=tr_tech_cont]：last'和$tr.after$.findtd.append$klon.end{html:$，{html:$klon}这不起作用，因为它类似于.html$klon@RajaprabhuAravindasamy这将不起作用。？请参阅postIf中的stacksnippets。如果未添加true，则不会克隆已克隆元素的克隆子元素。这是您的语句。我从您的语句中了解到，如果我们不传递true，则select中的选项将不会被克隆复制。但现在您是引用文档表示不会复制用户选择和文本区域中键入的文本。@RajaprabhuAravindasamy I不正确；我的初始语句不准确。添加了关于.clone和select元素的注释以供参考

var $klon = $select.clone().prop('id', 'tech_'+num ).prop('name', 'tech_'+num );
var newTr = $('<tr/>');
var newTd = $('<td/>');    

newTr.insertAfter($tr);        
newTr.append(newTd);
newTd.append($klon);

$("#btnClone").bind("click", function () {
    var $tr = $('tr[id^="tr_"]:last');
    var $select = $('select[id^="tech_"]:last');

    var num = parseInt($select.prop("id").match(/\d+/g), 10) + 1;
    var $klon = $select.clone().prop('id', 'tech_' + num).prop('name', 'tech_' + num);

    $tr.after($("<tr id=tr_" + num + "><td></td></tr>")); // change here
    $('#tr_' + num + ' td').append($klon); // change here 
});

$tr.after($("<tr>", {append:$("<td>", {append:$klon})}))