javascript - 如何使用jquery显示动态添加列的总数

Question

我制作了一个购物车，其中根据自动完成搜索添加了行。并根据数量改变价格。但我想找到小计的总数..我已经写了更新部分。但它显示的是 0 而不是实际值。谁能帮我找出我的 jQuery 代码中的问题。谢谢!

 $('#searchName').autocomplete({
                source: '{!! asset('nameAutocomplete') !!}',
                select:function(suggestion,ui){
                    event.preventDefault();       
                        var $tbody = $('#example tbody');
                        $tbody.append('<tr><td class="id">' + ui.item.id +
                        '</td><td class="name">' + ui.item.value +
                        '</td><td class="price">' + ui.item.price +
                        '</td><td><input type="text" class="quantity" value="1"/></td><td><input type="text" class="total" readonly value="'+ui.item.price+'" class="readonly"/></td></tr>');
                        $('.quantity').on('keyup',function(){
                            var tot = $(this).parent().prev().html() * this.value;
                           $(this).parent().next().find('.total').val(tot);  
                      console.log(calculateSum());    
                        });
                       function calculateSum(){
                        var sum = 0;
                    $(".total").each(function() {
                        var value = $(this).text();
                        // add only if the value is number
                        if(!isNaN(value) && value.length != 0) {
                            sum += parseFloat(value);
                        }
                        });
                    return sum;
                    }               
                   }                   
            });

这是表格部分:

<table  class="table table-striped table-bordered"  id="example">
                    <thead>
                      <tr>                      
                        <td>ID</td>
                        <td>Name</td>
                        <td>Price</td> 
                        <td>Quantity</td>
                        <td>Total</td>                     
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>  

Answer 1

$(".total") 是一个输入，因此您应该使用 var value = $(this).val();，而不是 var值 = $(this).text();