<tr><td> 中的 jquery 克隆选择元素

Question

我想克隆一个选择并更新 name 和 id 值。选择在 <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" />

我可以在没有桌子的情况下做到这一点，但我的挑战是将克隆放入新的 <tr><td> ... </td></tr>

这是我的 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>");
});

此代码导致克隆的<select> 在原始下方，而新的<tr><td> 和</td></tr> 之间没有任何内容

Answer 1

首先将tr 和td 添加到tr 的id，然后将select 添加到新td 下的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 
});

Answer 2

在创建tr和td后尝试append选择元素，

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

Answer 3

您应该创建元素而不是附加 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);

工作示例：https://jsfiddle.net/DinoMyte/raz34m93/

Answer 4

尝试使用jQuery(html, attributes) ;另外，要包含克隆元素的 childNodes，请将 true 添加到 .clone(true) ，请参阅 .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 (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(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>