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

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

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

Answer 2

首先使用tr td添加id和tr，然后将select添加到新td下的tr喜欢以下。

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

4 个答案: