jQuery在多个元素上的数学运算

Question

我有一个简单的开发票页面，所以我可以为我的客户开具发票，但是当我要执行数量和价格的乘法时，行总数不会被添加。这是我的jQuery到目前为止。

$(":input").bind('keypress keydown keyup change', function(){ 
    var price = parseFloat($(this).closest('.tr').find('.price').val(),10), 
    var qty = parseFloat($(this).closest('tr').find('.quantity').val(),10); 
    var v = ''; 
    if(!isNaN(price) && !isNaN(qty)) { 
    v = price * qty; 
    } 
    $(this).closest('tr').find('.rowtotal').val(v.toString()); 
}); 

这是我的HTML：

<table> 
    <tr> 
     <td>1</td> 
     <td><input name="item_name[]"class="form-control"></td> 
     <td><input name="item_description[]"class="form-control"></td> 
     <td><input name="item_price[]"class="form-control price"></td> 
     <td><input name="item_quantity[]"class="form-control quantity"></td> 
     <td><span class="rowtotal">0.00</span></td> 
     </tr> 
    <tr> 
     <td>2</td> 
     <td><input name="item_name[]"class="form-control"></td> 
     <td><input name="item_description[]"class="form-control"></td> 
     <td><input name="item_price[]"class="form-control price"></td> 
     <td><input name="item_quantity[]"class="form-control quantity"></td> 
     <td><span class="rowtotal">0.00</span></td> 
     </tr> 
    </table> 

现在我的网页上，就说明没有错误，同时审查控制台，但不执行的操作，我创建了下面这篇文章“Automatically updating input field with math using jquery? “

任何帮助表示赞赏。

TIA

Answer 1

你有在这一行一个错字：

var price = parseFloat($(this).closest('.tr').find('.price').val(),10), 
             ^^ Shouldn't be a class selector 

应该是：

var price = parseFloat($(this).closest('tr').find('.price').val(),10), 

下一行是好的。此外，您可以替换所有这些事件：

$(":input").on("input", function() { 
    // Triggers on any input event 
}); 

您也有一些其他问题：

1. 没有为parseFloat无过载这需要两个参数
2. 您正在使用.val()设置跨度的文本。您需要使用.text()而不是
3. 您应该缓存<tr>选择器。你不需要每次都去找。

$(":input").on('input', function(){  
    var $tr = $(this).closest("tr"); 
     var price = parseFloat($tr.find('.price').val()), 
      qty = parseFloat($tr.find('.quantity').val()); 
     var v = ''; 
     if(!isNaN(price) && !isNaN(qty)) { 
      v = price * qty; 
     } 
     $tr.find('.rowtotal').text(v.toString()); 
    }); 

Working Example