jquery在动态表中对两个输入进行求和并在第三个显示

Question

对于SO社区，我有一个脚本，它将具有唯一名称的行添加到表中。我想在每一行上输入两个输入并将它们相乘并在第三个输入中显示结果。

小提琴在http://jsfiddle.net/yUfhL/231/

我的代码是： HTML

<table class="order-list"> 
    <tr><td>Product</td><td>Price</td><td>Qty</td><td>Total</td></tr> 
    <tr> 
     <td><input type="text" name="product" /></td> 
     <td><input type="text" name="price" /></td> 
     <td><input type="text" name="qty" /></td> 
     <td><input type="text" name="linetotal" /></td> 
    </tr> 
</table> 
<div id="grandtotal"> 
    Grand Total Here 
</div> 

JS

var counter = 1; 
jQuery("table.order-list").on('change','input[name^="product"]',function(event){ 
    event.preventDefault(); 
    counter++; 
    var newRow = jQuery('<tr><td><input type="text" name="product' + 
     counter + '"/></td><td><input type="text" name="price' + 
     counter + '"/></td><td><input type="text" name="qty' + 
     counter + '"/></td><td><input type="text" name="total' + 
     counter + '"/></td><td><a class="deleteRow"> x </a></td></tr>'); 
    jQuery('table.order-list').append(newRow); 
}); 

jQuery("table.order-list").on('click','.deleteRow',function(event){ 

    $(this).closest('tr').remove(); 
}); 

$('table.order-list tr').each(function() { 
    var price = parseInt($('input[id^=price]', this).val(), 10); 
    var qty = parseInt($('input[id^=qty]' , this).val(), 10); 
    $('input[id^=linetotal]', this).val(price * qty); 
}); 

所以目前我不能让JS把大火，得到两个电池的产品，数量和价格。我想在linetotal中显示结果。

的这最后一部分将在div grandtotal

帮助理解，因为总是显示所有linetotals作为总计的总和。

Answer 1

您只给元素一个名称属性，但使用id选择器（[id^= price]）。给他们一个特定的课程要比使用“id开始于”选择器要容易得多。另外，您希望何时计算行总数？你想什么时候计算总计？什么事件？

这里是我的，应该如何看待解释：

<table class="order-list"> 
    <thead> 
     <tr><td>Product</td><td>Price</td><td>Qty</td><td>Total</td></tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td><input type="text" name="product" /></td> 
      <td>$<input type="text" name="price" /></td> 
      <td><input type="text" name="qty" /></td> 
      <td>$<input type="text" name="linetotal" readonly="readonly" /></td> 
      <td><a class="deleteRow"> x </a></td> 
     </tr> 
    </tbody> 

    <tfoot> 
     <tr> 
      <td colspan="5" style="text-align: center;"> 
       <input type="button" id="addrow" value="Add Product" /> 
      </td> 
     </tr> 

     <tr> 
      <td colspan="5"> 
       Grand Total: $<span id="grandtotal"></span> 
      </td> 
     </tr> 
    </tfoot> 
</table> 

而且JS：

$(document).ready(function() { 
    var counter = 1; 

    $("#addrow").on("click", function() { 
     counter++; 

     var newRow = $("<tr>"); 
     var cols = ""; 
     cols += '<td><input type="text" name="product' + counter + '"/></td>'; 
     cols += '<td>$<input type="text" name="price' + counter + '"/></td>'; 
     cols += '<td><input type="text" name="qty' + counter + '"/></td>'; 
     cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>'; 
     cols += '<td><a class="deleteRow"> x </a></td>'; 
     newRow.append(cols); 

     $("table.order-list").append(newRow); 
    }); 

    $("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) { 
     calculateRow($(this).closest("tr")); 
     calculateGrandTotal(); 
    }); 

    $("table.order-list").on("click", "a.deleteRow", function (event) { 
     $(this).closest("tr").remove(); 
     calculateGrandTotal(); 
    }); 
}); 

function calculateRow(row) { 
    var price = +row.find('input[name^="price"]').val(); 
    var qty = +row.find('input[name^="qty"]').val(); 
    row.find('input[name^="linetotal"]').val((price * qty).toFixed(2)); 
} 

function calculateGrandTotal() { 
    var grandTotal = 0; 
    $("table.order-list").find('input[name^="linetotal"]').each(function() { 
     grandTotal += +$(this).val(); 
    }); 
    $("#grandtotal").text(grandTotal.toFixed(2)); 
} 

http://jsfiddle.net/QAa35/

在你的JS，你没有使用linetotal为一个动态输入的name。我做了其他几个小的修改。你可以使用<thead>,<tbody>和<tfoot>，因为你在<table>中有这些部分。另外，我不认为这是一个好的设计，当“产品”输入发生改变时会自动添加新行。这可能会经常发生，他们的意图可能不是添加新产品......一个按钮更友好。例如，假设您在第一个“产品”输入中输入“asdf”，然后单击某处。新行被添加。假设你犯了一个错字，所以你回去改变它为“asd”，然后点击某处。另一个新行被添加。这看起来不正确。

Answer 2

这个功能应该做的伎俩：

function updateGrandTotal() { 

    var prices = []; 
    $('input[name^="price"]').each(function() { 
     prices.push($(this).val()); 
    }); 

    var qnts = []; 
    $('input[name^="qty"]').each(function() { 
     qnts.push($(this).val()); 
    }); 

    var total = 0; 
    for(var i = 0; i < prices.length; i++){ 
     total += prices[i] * qnts[i]; 
    } 

    $('#grandtotal').text(total.toFixed(2)); 

} 

你只需要绑定表改变事件的输入更改总计每一次更新：

$("table.order-list").change(updateGrandTotal); 

Here是工作小提琴。