从表格行向另一表格行添加数据的功能实现问题求助

我来帮你搞定这个功能！你的原代码存在几个关键问题：比如重复ID、按钮选择器错误、缺少数值计算逻辑以及库存更新逻辑。下面是完整的修正实现，完全满足你的需求：

修正后的HTML代码 #

首先要修复重复ID的问题（HTML中ID必须唯一），把重复的id="cod"和id="Quantity"改成类名：

<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 class="cod">1101</td>
      <td>aaa</td>
      <td class="num-of-item">25</td>
      <td class="price">9</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1102</td>
      <td>bbb</td>
      <td class="num-of-item">25</td>
      <td class="price">13</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1103</td>
      <td>ccc</td>
      <td class="num-of-item">25</td>
      <td class="price">20</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1104</td>
      <td>ddd</td>
      <td class="num-of-item">25</td>
      <td class="price">35</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1201</td>
      <td>RRTT</td>
      <td class="num-of-item">25</td>
      <td class="price">9</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1301</td>
      <td>BBFF</td>
      <td class="num-of-item">25</td>
      <td class="price">9</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1901</td>
      <td>aaa</td>
      <td class="num-of-item">25</td>
      <td class="price">9</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1651</td>
      <td>aaa</td>
      <td class="num-of-item">25</td>
      <td class="price">9</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
    <tr>
      <td class="cod">1231</td>
      <td>AAA</td>
      <td class="num-of-item">25</td>
      <td class="price">9</td>
      <td><input type="text" class="quantity-input" value="0" /></td>
      <td><button class="use-button w3-button w3-circle w3-amber">+</button></td>
    </tr>
  </tbody>
</table>
<input type="text" id="discount" name="% of discount" placeholder="输入折扣百分比">
<table id="pdfTab" class="w3-table-all w3-small" style="width:92%;margin-bottom:10px;margin-left:23px">
  <thead>
    <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>
  </thead>
  <tbody></tbody>
</table>

修正后的jQuery代码 #

这段代码会处理点击事件、数值验证、计算、表格插入和库存更新：

$(document).ready(function() {
  // 绑定按钮点击事件（用类选择器，修正原选择器错误）
  $(".use-button").click(function() {
    // 获取当前点击按钮所在的行
    const $row = $(this).closest("tr");
    
    // 提取当前行的各项数据
    const cod = $row.find(".cod").text();
    const desc = $row.find("td:nth-child(2)").text();
    const currentStock = parseInt($row.find(".num-of-item").text());
    const price = parseFloat($row.find(".price").text());
    const quantity = parseInt($row.find(".quantity-input").val());
    const discount = parseFloat($("#discount").val()) || 0; // 折扣默认0
    
    // 验证输入的数量是否有效
    if (isNaN(quantity) || quantity <= 0 || quantity > currentStock) {
      alert("请输入有效的数量（需大于0且不超过库存）");
      return;
    }
    
    // 计算总价：[(€*Quantity)/100] * discount
    const total = ((price * quantity) / 100) * discount;
    
    // 构建第二个表格的新行
    const newRow = `
      <tr>
        <td>${cod}</td>
        <td>${desc}</td>
        <td>${quantity}</td>
        <td>${discount}%</td>
        <td>${total.toFixed(2)}</td> <!-- 保留两位小数 -->
      </tr>
    `;
    
    // 将新行插入第二个表格
    $("#pdfTab tbody").append(newRow);
    
    // 更新第一个表格的库存数量
    $row.find(".num-of-item").text(currentStock - quantity);
    
    // 清空当前行的数量输入框
    $row.find(".quantity-input").val(0);
  });
});

关键功能说明 #

• 选择器修正：原代码用$("use-button")是错误的，应该用类选择器$(".use-button")
• 重复ID修复：把重复的ID改成类名，避免DOM选择混乱
• 数值验证：确保输入的数量是有效数字，且不超过库存
• 总价计算：严格按照你给出的公式[(€*Quantity)/100] * discount计算，并保留两位小数
• 库存更新：点击后自动减去已选择的数量
• 用户体验优化：清空输入框，避免重复输入错误数值

内容的提问来源于stack exchange，提问作者albeert