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

我正在制作一个基于Web的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,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);
});

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

最佳答案

编辑：更新的答案.

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

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

原文链接：https://www.f2er.com/html/530418.html

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

猜你在找的HTML相关文章