javascript - 使用 td 标记内的选择元素克隆表行

Question

我是 JS 新手。我有一个动态表（我没有添加添加和删除行的代码），我想在另一个表中显示它。我尝试克隆每一行。一切正常，但带有选择元素的 td 标记未正确克隆。如果没有选择，它会显示选择的值或第一个值。这个克隆的想法是以模态形式显示表格，克隆的表格就像预览一样。显示模态敌人时发生克隆。在下面的代码中，我添加了克隆表的按钮。我认为，在这种情况下没关系。

这是小提琴链接。

这是我的代码 HTML：

<table class="table table-bordered" id="table" >
   <thead>
     <tr>
       <td >#</td>
       <td >Description</td>
       <td >Qty</td>
       <td >Units</td>
       <td >Price without vat</td>
       <td >Vat %</td>
       <td >Total</td>
       <td >Del</td>
     </tr>
   </thead>

   <tr class="product">

     <td class="cloned" width="4%" >
       <input type="number" class="enumer" style="width:100%; border: none; padding: 0" disabled="disabled">
     </td>

     <td class="cloned" width="34%">
       <input type="text" class="item_product" style="width:100%;" name="product[]">
     </td>

     <td class="cloned" width="18">
       <input style="width:100%;" class="qty" id="qty" name="qty[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" type="text" value="0" required>
     </td>

     <td class="cloned" width="7%">
       <input  id="item_units[]" class="units" style="width:100%;" name="item_units[]" type="text" value="ks">
     </td>

     <td class="cloned" width="10%">
       <input class="price" style="width:100%;" id='price' name="price_unit[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" value="0" type="text" required>
     </td>
     <td class="cloned" width="7%" id="vat_td">
       <select class="vat" id="vat" name="vat[]" type="text">
         <option value="0">0</option>
         <option value="10">10</option>
         <option value="20">20</option>
       </select>
     </td>
     <input class="hidden" hidden value="1" id="payer_vat_hidden">
     <td class="cloned" width="17%">
       <input type="number" style="width:100%; background: #dddddd;" class="amount" id="amount" name="amounts[]" readonly>
     </td>
     <td class="delTD" width="5%">
      <button type="button" style="width:100%;" id="deleteRow" class="btn btn-danger btn-sm">Delete</button>
     </td>
   </tr>
</table>
  
<button onclick="copyTable()">copy table</button>


<table class="table table-bordered" id="second_table" >
                          <thead>
                             <tr>
                                 <th>#</th>
                                <th>DESCRIPTION</th>
                                <th class="text-center">QUANTITY</th>
                                <th class="text-center">UNITS</th>
                                <th class="text-right">PRICE</th>
                                <th class="text-right">Total</th>
                             </tr>
                          </thead>
                          <tbody>
                          </tbody>
                       </table>

这是我的代码Javascript：

function copyTable(){

  $("#second_table tr").remove();
  $("#table tr").each(function() {
  var $target = $("#second_table");
  var $tds = $(this).children(),
      $row = $("<tr></tr>");
      $row.append($tds.eq(0).clone())
          .append($tds.eq(1).clone())
          .append($tds.eq(2).clone())
          .append($tds.eq(3).clone())
          .append($tds.eq(4).clone())
          .append($tds.eq(5).clone())
          .append($tds.eq(6).clone())
          .appendTo($target);
  });
}

标签： javascriptselectcopyclone