Добавить элемент (строку) из таблицы в другую строку таблицы

Question

У меня есть две таблицы. Первый содержит записи базы данных. Его последний столбец содержит кнопку. Когда я ищу предмет в таблице и нахожу его, я вставляю количество и нажимаю кнопку. Затем функция скопирует все td строки и добавит ее в новую таблицу.

Моя проблема заключается в том, что только первые два столбца второй таблицы содержат одинаковое значение (COD и DESC) но N.ITEM должен быть входом Quantity, а DISCOUNT должен быть входом #discount, а последний TOT должен быть [(€*Quantity)/100] * discount.

Очевидно, мне также необходимо обновить Num of item в первой таблице с Num of item - Quantity. Я надеюсь, что кто-то может мне помочь.

$(document).ready(function() {
  $(".use-button").click(function() {
    var html = $(this).closest("tr").clone().find('td:last').remove().end().prop('outerHTML');
    $("#pdfTab").append(html);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr class="header">
      <th style="width:20%;">Cod</th>
      <th style="width:30%;">Desc</th>
      <th style="width:20%">Num of item</th>
      <th style="width:10%">€</th>
      <th style="width:10%">Quantity</th>
      <th style="width:10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="cod">1101</td>
      <td>aaa</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1102</td>
      <td>bbb</td>
      <td>25</td>
      <td>13</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1103</td>
      <td>ccc</td>
      <td>25</td>
      <td>20</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1104</td>
      <td>ddd</td>
      <td>25</td>
      <td>35</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1201</td>
      <td>RRTT</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1301</td>
      <td>BBFF</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1901</td>
      <td>aaa</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1651</td>
      <td>aaa</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1231</td>
      <td>AAA</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
  </tbody>
</table>
<input type="text" id="discount" name="% of discount">

<table id="pdfTab" class="w3-table-all w3-small" style="width:92%;margin-bottom:10px;margin-left:23px">
  <tr>
    <th style="width:20%;">COD</th>
    <th style="width:30%;">DESC</th>
    <th style="width:20%;">N.ITEM</th>
    <th style="width:20%;">DISCOUNT</th>
    <th style="width:10%;">TOT</th>
  </tr>
</table>

Answer 1

Некоторый грязный код, но он должен дать вам представление.

Считайте значение каждого столбца отдельно, выполните вычисления, затем вручную создайте строку и добавьте ее во вторую таблицу. Вы можете добавить дополнительную проверку введенных сумм, чтобы проверить, являются ли они действительными числами. Я установил по умолчанию значение скидки до 10. Ваша формула кажется неправильной, но, возможно, я просто слишком устал, чтобы думать.

$(document).ready(function () {
    $(".use-button").click(function () {
        var row = $(this).closest("tr");

        //Get Values from each Column
        var code     = row.find('td')[0].textContent;
        var desc     = row.find('td')[1].textContent;
        var nItem    = parseInt(row.find('td')[2].textContent);
        var price    = parseFloat(row.find('td')[3].textContent);
        var quantity = parseInt(row.find('input')[0].value);
        var discount = parseFloat($('#discount').val());

        //Calculate your total. N.B. Your formula looks wrong but I kept it the same
        var total = ((price * quantity) / 100) * discount;

        //Update the "Num of item" column on the row you clicked
        nItem = nItem - quantity;
        row.find('td')[2].textContent = nItem;

        //Manually add each amount to the relevant column and append the row to the table
        var newRow = '<tr><td>' + code + '</td><td>' + desc + '</td><td>' + nItem + '</td><td>' + discount + '</td><td>' + total + '</td><tr>';
        $("#pdfTab").append(newRow);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr class="header">
      <th style="width:20%;">Cod</th>
      <th style="width:30%;">Desc</th>
      <th style="width:20%">Num of item</th>
      <th style="width:10%">€</th>
      <th style="width:10%">Quantity</th>
      <th style="width:10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="cod">1101</td>
      <td>aaa</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1102</td>
      <td>bbb</td>
      <td>25</td>
      <td>13</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1103</td>
      <td>ccc</td>
      <td>25</td>
      <td>20</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1104</td>
      <td>ddd</td>
      <td>25</td>
      <td>35</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1201</td>
      <td>RRTT</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1301</td>
      <td>BBFF</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1901</td>
      <td>aaa</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1651</td>
      <td>aaa</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td id="cod">1231</td>
      <td>AAA</td>
      <td>25</td>
      <td>9</td>
      <td><input type="text" id="Quantity" value="0" /></td>
      <td><button id="addButton" class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
  </tbody>
</table>
<b>Discount: </b><input type="text" id="discount" name="% of discount" value="10">

<table id="pdfTab" class="w3-table-all w3-small" style="width:92%;margin-bottom:10px;margin-left:23px">
  <tr>
    <th style="width:20%;">COD</th>
    <th style="width:30%;">DESC</th>
    <th style="width:20%;">N.ITEM</th>
    <th style="width:20%;">DISCOUNT</th>
    <th style="width:10%;">TOT</th>
  </tr>
</table>