jQuery克隆选择元素<tr><td>

Question

I would like to clone a select and update the name and id values. The select is within a <tr><td>

<table>
<tr id="tr_1">
    <td id="td_1">
        <select name="tech_1" id="tech_1">
            <option value="0">Please Select</option>
            <option value="1">Mango</option>
            <option value="2">Apple</option>
            <option value="3">Banana</option>
            <option value="4">Orange</option>
        </select>
    </td>
</tr>
</table>
<input type="button" id="btnClone" value="Clone" />

I can do it without the table, but my challenge is putting the clone within a new <tr><td> ... </td></tr>

Here is my 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>");
});

This code results in the cloned <select> below the original and nothing between the new <tr><td> and </td></tr>

Answer 1

在创建tr和td ，尝试append select元素，

$tr.after($("<tr><td></td></tr>").find("td").append($klon).end());

Answer 2

Add tr and td first with the id of tr and then add select to the td under new tr like following.

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

Answer 3

You should create the elements rather than appending 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);

Working example : https://jsfiddle.net/DinoMyte/raz34m93/

Answer 4

Try using jQuery(html, attributes) ; also, to include childNodes of cloned element, add true to .clone(true) , see .clone()

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

 $("#btnClone").on("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 (ie: 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 (ie: from num 4 to ID "tech_4") var $klon = $select.clone(true).prop('id', 'tech_' + num).prop('name', 'tech_' + num); // Finally insert $klon wherever you want $tr.after( $("<tr>", { append: $("<td>", { append: $klon }) }) ) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr id="tr_1"> <td id="td_1"> <select name="tech_1" id="tech_1"> <option value="0">Please Select</option> <option value="1">Mango</option> <option value="2">Apple</option> <option value="3">Banana</option> <option value="4">Orange</option> </select> </td> </tr> </table> <button id="btnClone">click</button>