如何使用jquery自动生成动态表的总价？

问题描述

我正在制作一个基于网络的POS。 我有两个表，一个用于使用jquery显示搜索产品，当我点击产品时，它将转移到第二个表。 所以我的第二个表是动态依赖于用户点击的内容。 这是我的表与css一样。

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

这是我的html表代码。

<table id="table2">
    <thead>
        <tr>
            <th>Barcode</th>
            <th>Description</th>
            <th>Price</th>
            <th>Unit</th>
            <th>Qty</th>
            <th>Sub.Total</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tableData">
    </tbody>
</table>

<table id="table1">
   <thead>
        <tr>
            <td>Barcode</td>
            <td>Product Name</td>
            <td>Price</td>
            <td>Unit</td>
            <td>Stocks</td>
        </tr>
    </thead>
    <tbody id="products">   
    </tbody>
</table>

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

$show   = "SELECT * FROM products WHERE product_name LIKE '$name%' ";
    $query  = mysqli_query($db,$show);
    if(mysqli_num_rows($query)>0){
        while($row = mysqli_fetch_array($query)){
            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>";
            echo "<td>?".$row['sell_price']."</td>";
            echo "<td>".$row['unit']."</td>";
            echo "<td>".$row['quantity']."</td>";
        }
    }

这用于显示搜索到的产品中的cliked行。

    $('body').on('click','.js-add',function(){
        var target = $(this);
        var product = target.attr('data-product');
        var price = target.attr('data-price');
        var barcode = target.attr('data-barcode');
        var unit = target.attr('data-unt');     
        swal("Enter number of item to buy:", {
            content: "input",
        })
        .then((value) => {
            if (value == "") {
                swal("Error","Entered none!","error");
            }else{
                var qtynum = parseInt(value);
                if (isNaN(qtynum)){
                    swal("Error","Please input a valid number!","error");
                }else{
                    var total = value * price;
                    $('#tableData').append("<tr><td>"+barcode+"</td
                    <td>"+product+"</td>
                   <td>"+accounting.formatMoney(price,{symbol:"?",format: "%s %v"})+"</td><td>"+unit+"</td>
                   <td>"+value+"</td>
                   <td class='totalPrice'>"+accounting.formatMoney(total,{symbol:"?",format: "%s %v"})+"</td>
                   <td><button class='btn btn-danger' type='button' id='delete-row'>&times</button><tr>");          
               }
            }
        });
    });

我试过这个代码，但它返回NaN。

   $(document).ready(function(){
    var TotalValue = 0;
    $("#tableData tr").each(function(){
          TotalValue += parseFloat($(this).find('.totalPrice').text().replace(/,/g, "?"));
    });
    alert(TotalValue);
});

我试过修改代码，但我无法完成工作。 希望有人能帮助解决这个问题。 提前致谢。