javascript - 当我使用 $.append 时如何克隆元素

Question

当页面加载时，我将一些来自 json 的数据拉到组合框。

function DataProvide(){
    //Load data from json
    selectValues = { 
        "pilih"         : "-Pilih-",
        "id"            : "ID",
        "emp_name"      : "Employee Name",
        "photo_path"    : "Photo Path",
        "emp_id"        : "Employee ID",
        "birth_place"   : "Birth Place",
        "birth_date"    : "Birth Date"
    };

    $.each(selectValues, function(key, value) {   
         $('#data1_1')
             .append($("<option></option>")
             .attr("value",key)
             .text(value)); 
    }); 
}

$(document).ready(function() {
     DataProvide();
});

加载页面时，我成功生成了组合框中的数据输入，但我的问题是当我想使用 $.Append.... 在表中执行附加行时。

$(".addCF").click(function(){
      count += 1;
      $("#customFields").append(
          '<tr>'
            + '<td>'
                    + '<select id="data1_'+count+'" class="tabelBaru" name="data1[]">'
                            + '<option value="pilih" selected >Pilih</option>'
                            + ... clone from element $('#data1_1')
                            + ... clone from element $('#data1_1')
                            + ... clone from element $('#data1_1')
                    + '</select>'
            + '</td>'
            + '<td>'
                + '<input id="data2_'+count+'" type="text" name="data2[]" class="data2" value="" placeholder=""/>'
            + '</td>'
            + '<td>'
                + '<input id="data3_'+count+'" type="email" name="data3[]" class="data3" value="" placeholder=""/>'
            + '</td>'
            + '<td>'
                + '<a href="javascript:void(0);" class="remCF">Remove</a>'
            + '</td>'
        + '</tr>'
      );
  });

如何使用 $.clone 函数获取 $('#data1_1') 元素以及打开第一页时创建的所有数据？

Answer 1

尝试

$(".addCF").click(function () {
    count += 1;
    var $row = $('<tr>' + '<td>' + '</td>' + '<td>' + '<input id="data2_' + count + '" type="text" name="data2[]" class="data2" value="" placeholder=""/>' + '</td>' + '<td>' + '<input id="data3_' + count + '" type="email" name="data3[]" class="data3" value="" placeholder=""/>' + '</td>' + '<td>' + '<a href="javascript:void(0);" class="remCF">Remove</a>' + '</td>' + '</tr>').appendTo("#customFields");

    $row.find('td:first').append($('#data1_1').clone())
});