在写入 html 输入 1 时更改第二个和第三个 html 输入

Question

我在html + php表中显示数据库表的值，我的目标是更改文章数量或价格的输入，并自动将总值更改为正在编辑的行数，并使用在该总计中输入的值更新其余行。

我认为这可以与javascript或其他任何东西一起使用，但我不知道js，我希望有人可以帮助我。

<tbody>
<?php
$sql=sprintf("SELECT * FROM rostosativos_invoiceprop WHERE id_proposta = '".$_GET['id']."'");
$res=mysqli_query($link, $sql);
while ($r=mysqli_fetch_assoc($res)){ ?>
<tr>                                                                
   <td><input type="text" value="<?php echo $r['produto']; ?>" name="product"></td>         
   <td><input type="text" value="<?php echo $r['precouni']; ?>" name="priceunit"></td>                                                              
   <td><input type="text" value="<?php echo $r['quantidade']; ?>" name="quantity"></td>                                                              
   <td><input type="text" value="<?php echo $r['soma']; ?>" name="sum"></td>                                                                 
   <td><input type="text" value="<?php echo $r['totalsoma']; ?>" name="totalsum"></td>                                                                                                                           
   <td class="actions">
      <a href="maisproposta?id=<?php echo $r['id_proposta']; ?>" class="delete-row"><i class="fa fa-plus-square"></i></a>                                                
   </td>                                                        </tr>
<?php } ?>
</tbody>

例：

桌子上有 3 行

名称 | 价格单位 | 数量 | 总和 | 总计

产品 1 | 5.00 | 2 | 10.00 | 10.00
产品 2 |5.00 |1 |5.00 |15：00
产品 3 |2.00 |2 |4.00 |19：00

更改商品2价格

我希望它自动执行此操作

名称 | 价格单位 | 数量 | 总和 | 总计

产品 1 | 5.00 | 2 | 10.00 | 10.00
产品 2 |10.00 |1 |10.00 |20：00
产品 3 |2.00 |2 |4.00 |24：00

Answer 1

在应用 jquery 或 javascript 之前，需要为每个输入放置 .class/#id。在这种情况下，价格，数量，总和和总和。所以单行会是这样的

<tr>                                                                
   <td><input type="text" value="1" name="product"></td>         
   <td><input type="text" class="price" value="5.00" name="priceunit"></td>                                                              
   <td><input type="text" class="qty" value="2" name="quantity"></td>                                                              
   <td><input type="text" class="sum" value="10.00" name="sum"></td>                                                                 
   <td><input type="text" class="totalSum" value="10.00" name="totalsum"></td>                                                                                                                           
   <td class="actions">
      <a href="maisproposta?id=1" class="delete-row"><i class="fa fa-plus-square"></i></a>                                                
   </td>

jquery 可以通过每次循环的方法应用，以消除计算错误。演示

$(document).on('keyup','.qty, .price',function(e){
        findTotal();
});
 function findTotal(){
    var totalSum = 0;
    var price,qty,sum;
  $rows = $('#productPriceList tbody tr');
    $.each($rows,function(key,row){
        price = Number($(row).find('.price').val());
        qty = Number($(row).find('.qty').val());
        sum =  price * qty;
    totalSum += sum;
    $(row).find('.sum').val(sum.toFixed(2)); 
        $(row).find('.totalSum').val(totalSum.toFixed(2)); 
    });
 }