javascript-如何使用jquery自动生成动态表的总价?

前端之家收集整理的这篇文章主要介绍了javascript-如何使用jquery自动生成动态表的总价? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在制作一个基于Web的POS.我有两个表,一个表用于显示使用jquery搜索产品,当我单击该产品时,它将转移到第二个表.因此,我的第二张表动态取决于用户单击的内容.这是我的CSS表格.

enter image description here

我想自动获取Sub.Total列的总价格,并在Total p标签中特别显示底部.

这是我的html表代码.

  1. <table id="table2">
  2. <thead>
  3. <tr>
  4. <th>Barcode</th>
  5. <th>Description</th>
  6. <th>Price</th>
  7. <th>Unit</th>
  8. <th>Qty</th>
  9. <th>Sub.Total</th>
  10. <th>Action</th>
  11. </tr>
  12. </thead>
  13. <tbody id="tableData">
  14. </tbody>
  15. </table>
  16. <table id="table1">
  17. <thead>
  18. <tr>
  19. <td>Barcode</td>
  20. <td>Product Name</td>
  21. <td>Price</td>
  22. <td>Unit</td>
  23. <td>Stocks</td>
  24. </tr>
  25. </thead>
  26. <tbody id="products">
  27. </tbody>
  28. </table>

这是我在搜索框中的查询.

  1. $show = "SELECT * FROM products WHERE product_name LIKE '$name%' ";
  2. $query = MysqLi_query($db,$show);
  3. if(MysqLi_num_rows($query)>0){
  4. while($row = MysqLi_fetch_array($query)){
  5. echo "<tr class='js-add' data-barcode=".$row['id']." data-product=".$row['product_name']." data-price=".$row['sell_price']." data-unt=".$row['unit']."><td>".$row['id']."</td><td>".$row['product_name']."</td>";
  6. echo "<td>₱".$row['sell_price']."</td>";
  7. echo "<td>".$row['unit']."</td>";
  8. echo "<td>".$row['quantity']."</td>";
  9. }
  10. }

这是为了显示搜索到的产品中的喜欢的行.

  1. $('body').on('click','.js-add',function(){
  2. var target = $(this);
  3. var product = target.attr('data-product');
  4. var price = target.attr('data-price');
  5. var barcode = target.attr('data-barcode');
  6. var unit = target.attr('data-unt');
  7. swal("Enter number of item to buy:",{
  8. content: "input",})
  9. .then((value) => {
  10. if (value == "") {
  11. swal("Error","Entered none!","error");
  12. }else{
  13. var qtynum = parseInt(value);
  14. if (isNaN(qtynum)){
  15. swal("Error","Please input a valid number!","error");
  16. }else{
  17. var total = value * price;
  18. $('#tableData').append("<tr><td>"+barcode+"</td
  19. <td>"+product+"</td>
  20. <td>"+accounting.formatMoney(price,{symbol:"₱",format: "%s %v"})+"</td><td>"+unit+"</td>
  21. <td>"+value+"</td>
  22. <td class='totalPrice'>"+accounting.formatMoney(total,format: "%s %v"})+"</td>
  23. <td><button class='btn btn-danger' type='button' id='delete-row'>&times</button><tr>");
  24. }
  25. }
  26. });
  27. });

我试过这段代码,但它返回NaN.

  1. $(document).ready(function(){
  2. var TotalValue = 0;
  3. $("#tableData tr").each(function(){
  4. TotalValue += parseFloat($(this).find('.totalPrice').text().replace(/,/g,"₱"));
  5. });
  6. alert(TotalValue);
  7. });

我曾尝试修改代码,但无法完成工作.希望有人能对此有所帮助.提前致谢.

最佳答案
编辑:更新的答案.

根据您在此处尝试的内容,将得出使用您的逻辑的可行解决方案.

  1. $(document).ready(function(){
  2. var TotalValue = 0;
  3. var TotalPriceArr = $('.totalPrice').get()
  4. $(TotalPriceArr).each(function(){
  5. TotalValue +=parseInt($(this).text().replace('₱',''))
  6. });
  7. alert(TotalValue);
  8. });

猜你在找的HTML相关文章