将表中的项目（行）添加到另一个表行

Question

我有两张桌子。第一个包含数据库条目。它的最后一列包含一个按钮。当我在表中搜索项目并找到它时，我将插入数量并单击按钮。然后该函数将复制该行的所有td并将其附加到新表中。

我的问题是，只有第二个表的前两列包含相同的值（COD 和 DESC）但 N.ITEM 应该是输入 Quantity 和 DISCOUNT 应该是输入 @987654327 @ 和最后一个TOT 应该是[(€*Quantity)/100] * discount。

显然我还需要用Num of item - Quantity 更新第一个表中的Num of item。我希望有人可以帮助我。

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