Javascript jquery对动态表上的两个输入求和，并在第三个表中显示

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

小提琴正在演奏

我的代码是： 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>

产品价格qtytotal
这里总计

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

var计数器=1；
jQuery（“table.order list”）.on（'change'，'input[name^=“product”]”，函数（事件）{
event.preventDefault（）；
计数器++；
var newRow=jQuery（'x'）；
jQuery（'table.order list'）.append（newRow）；
});
jQuery（“table.order list”）.on（'click'，'.deleteRow'，函数（事件）{
$（this）.closest（'tr'）.remove（）；
});
$（'table.order-list tr'）。每个（函数（）{
var price=parseInt（$（'input[id^=price]），this.val（），10）；
var qty=parseInt（$（'input[id^=qty]），this.val（），10）；
$（'input[id^=linetotal]'，this）.val（价格*数量）；
});

因此，目前我无法让js火得到两个单元的产品，数量和价格。我想在linetotal中显示结果

最后一部分是在div

grandtotal

---

一如既往地感谢您的帮助。

您只给元素一个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>

产品价格qtytotal
$
$

在JS中，您没有对一个动态输入的
名称使用
linetotal
。我还做了其他一些小修改。您还可以使用
、
和
，因为
中确实有这些部分。另外，我认为当“产品”输入发生变化时自动添加新行不是一个好的设计。这种情况经常发生，他们的目的可能不是添加新产品……按钮更友好。例如，假设您在第一个“产品”输入中键入“asdf”，然后单击某处。将添加一个新行。假设你输入了一个错别字，所以你返回并将其更改为“asd”，然后单击某个地方。将添加另一个新行。这似乎不对。
您只是给元素一个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>


产品价格qtytotal
$
$

在JS中，您没有对一个动态输入的
名称使用
linetotal
。我还做了其他一些小修改。您还可以使用
、
和
，因为
中确实有这些部分。另外，我认为当“产品”输入发生变化时自动添加新行不是一个好的设计。这种情况经常发生，他们的目的可能不是添加新产品……按钮更友好。例如，假设您在第一个“产品”输入中键入“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));

}

是一把工作小提琴。
此函数应能实现以下功能：

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

}

是一把工作小提琴。
您只给
元素一个
name
属性，但使用
id
选择器（
[id^=price]
）。给他们一个特定的类要比使用“id以开头”选择器容易得多。此外，您希望何时计算行总计？你想什么时候计算总数？在什么事件上？您只给
元素一个
名称
属性，但使用
id
选择器（
[id^=price]
）。给他们一个特定的类要比使用“id以开头”选择器容易得多。此外，您希望何时计算行总计？你想什么时候计算总数？在什么活动上？谢谢伊恩，效果很好。谢谢你的帮助。我听到你按按钮而不是自动进入。我的设计在产品表上有一个自动完成，但它仍然可以创建多行，所以按钮是一个好主意。谢谢。
a.deleteRow
只是为了帮助加快jQuery选择器过程。使用
a
意味着选择所有
元素（它是标记名选择器），然后按类为
deleteRow
的元素进行筛选。首先选择“按标记名”应该有助于加快速度（尽管可能不明显）。
a
和
.deleteRow
的组合只是因为您知道类
deleteRow
的元素肯定是
。如果有各种元素标记，则必须删除
a
。但是您有一个特定的、已知的HTML结构，因此可以使用：）我有
+行…
，因为
+
是一个用于将字符串转换为数字的运算符。它实际上是在转换
row.find（'input[name^=“price”]”）.val（）的结果，因为
.val（）
方法总是返回字符串。同时，当我有
price*qty
时，它们应该自动转换（如果可能的话），因为