Question

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

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

这是我的html表代码。

<html>

<head>
  <title>Vue</title>
</head>

<body>
<div id="app">
  <div v-for="(game, index) in games" :key="game.name"> <p>{{game}}</p>
    <h1>{{ game.name }} - <small>{{ game.console }}</small></h1>

    <span v-for="star in game.rating" v-on:click="increment(index)">❤️</span>

    <div v-if="game.rating > 5">Wow, this game must be <b>REALLY</b> good</div>
  </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
        data: {
          games: [
            { name: 'Super Mario 64', console: 'Nintendo 64', rating: 4 },
            { name: 'The Legend of Zelda Ocarina of Time', console: 'Nintendo 64', rating: 5 },
            { name: 'Secret of Mana', console: 'Super Nintendo', rating: 4 },
            { name: 'Fallout 76', console: 'Multiple', rating: 1 },
            { name: 'Super Metroid', console: 'Super Nintendo', rating: 6 }
          ],   
        },
          methods: {
                increment: function(index) {
                    this.games[index].rating += 1;
                },
          }
    });
  </script>
</body>

</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>";
        }
    }

我尝试过此代码，但返回NaN。

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

我曾尝试修改代码，但无法完成工作。希望有人能对此有所帮助。预先感谢。

Answer 1

编辑：更新了答案。

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

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

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

1 个答案: