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

Question

我正在制作基于网络的 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>";
        }
    }

这用于显示搜索产品中被点击的行。

    $('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);
});

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

Answer 1

编辑:更新答案。

根据您在此处尝试的内容，将是一个使用您的逻辑的可行解决方案。

$(document).ready(function(){
    var TotalValue = 0;
    var TotalPriceArr = $('.totalPrice').get()
    $(TotalPriceArr).each(function(){
          TotalValue +=parseInt($(this).text().replace('₱', ''))
    });
    alert(TotalValue);
});