Блог

Я новичок в 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);
  });
}