Jquery在动态表中对两个输入求和，并在第三个表中显示

jquery to sum two inputs on dynamic table and display in third

本文关键字：显示 三个 输入 动态 Jquery 两个 求和      更新时间：2023-09-26

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

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

我的代码是: 

<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的总和为grand total。

一如既往感谢您的帮助

您只给元素一个name属性，但是使用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中，你没有为一个动态输入的name使用linetotal。我还做了其他几个小的修改。您也可以使用<thead>, <tbody>和<tfoot>，因为您在<table>中确实有这些部分。此外，我不认为当"product"输入发生变化时自动添加新行是一个好的设计。这种情况经常发生，而且他们的目的可能不是增加一款新产品……按钮要友好得多。例如，假设您在第一个"产品"输入中键入"asdf"，然后单击某个位置。添加了一个新行。比方说你打错了一个字，所以你回去把它改成"asd"，然后点击某个地方。添加了另一个新行。这好像不对。

这个函数应该可以达到这个效果:

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));
}

您只需要将它绑定到表更改事件，以便在每次输入更改时更新total:

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

相关文章：