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是工作小提琴。