Javascript 在动态表单字段上执行计算

我想做一个脚本，你可以输入产品名称，数量，价格和税率%。 然后计算每个产品的总成本和总成本。 唯一的问题是每次必须添加新产品时，我都要添加新的表单字段

现在我的问题是：计算每种产品的总价格和总价格的最佳方法是什么

这是我到目前为止所做的，但由于我是javascript新手，所以我非常困惑。它还将字段保存到mysql，这一切都很好，我只是停留在每个产品的总价格和总价格上

提前谢谢

      <form method="post">
    <div id="itemRows">

product: <input type="text" name="add_product" />   
amount:<input type="text" id="value1" name="add_qty" size="4" onChange="output();"/> 
price:<input type="text" id="value2" name="add_price" onChange="output();"/> 
<select type="text" name="add_tax" onChange="output();">
  <option value="21">21%</option>
  <option value="6">6%</option>
  <option value="0">0%</option>
</select> 






 <input onClick="addRow(this.form); output()" type="button" value="Save product line..." /> 




    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>
    </form>
     <p id="result"> </p>

</div>

<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'">product: <input type="text" name="product[]" id = "product['+rowNum+']" value="'+frm.add_product.value+'"> amount: <input type="text" id="qty['+rowNum+']" name="qty[]" size="4" value="'+frm.add_qty.value+'"> price: <input type="text" id="price['+rowNum+']" name="price[]" value="'+frm.add_price.value+'">tax: <select type="text" id="tax['+rowNum+']" name="tax[]" value="'+frm.add_tax.value+'"><option value="21">21%</option><option value="6">6%</option><option value="0">0%</option><input type="button" value="Remove" onclick="removeRow('+rowNum+');output()"><div id="rowResult[rowNum]"></div>  <div id="rowResult[rowNum]"> </div></p>'  ;
    jQuery('#itemRows').append(row);

    frm.add_qty.value = '';

    frm.add_product.value = '';
    frm.add_price.value = '';
    frm.add_tax.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}

</script>


<script type="text/javascript" language="javascript" charset="utf-8">

function output(){
    var tableTotal = 0;
    var rowTotal = 0;
    qtyArr = new Array();
    priceArr = new Array();
    taxArr = new Array();
    $( "input[name^='qty']" ).each(function( index ) {
        qtyArr.push(parseInt($( this ).val()));
    });
    $( "input[name^='price']" ).each(function( index ) {
        priceArr.push(parseInt($( this ).val()));
    });
    $( "select[name^='tax']" ).each(function( index ) {
        taxArr.push(parseInt($( this ).val()));
    }); 
    $("div[id^=rowResult]").each();
    for(i = 0; i< qtyArr.length; i++)
    {
        rowTotal = qtyArr[i] * priceArr[i] * ((taxArr[i] / 100)+1);
        tableTotal+=rowTotal;
    }
    document.getElementById('result').innerHTML = "Total: " + tableTotal;


}

</script>

---

从设计的角度来看，您可以为每个产品添加类，一个类指的是特定的产品，另一个类指的是您想要添加到总计中的任何产品

然后，您可以使用jQuerys$。每个函数循环遍历每个类类型，获取内部文本或存储成本值的任何位置，并将其相加并显示在输出字段中。

下面是运行的步骤 您需要做的是使用jquery选择器获取所有输入，然后遍历它们以获取它们的值。一旦得到值，就可以轻松地计算行总值和表总值

<div style="width:90%;margin:auto;">

    <form method="post">
    <div id="itemRows">

product: <input type="text" name="add_product" />   
amount:<input type="text" id="value1" name="add_qty" size="4" onchange="output();"/> 
price:<input type="text" id="value2" name="add_price" onchange="output();"/> 
<select type="text" name="add_tax" onchange="output();">
  <option value="21">21%</option>
  <option value="6">6%</option>
  <option value="0">0%</option>
</select> 



 <p id="result"> </p>

 <input onClick="addRow(this.form); output()" type="button" value="add new line" /> 




    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>
    </form>
</div>

和js：

function output(){
    var tableTotal = 0;
    qtyArr = new Array();
    priceArr = new Array();
    taxArr = new Array();
    $( "input[name^='qty']" ).each(function( index ) {
        qtyArr.push(parseInt($( this ).val()));
    });
    $( "input[name^='price']" ).each(function( index ) {
        priceArr.push(parseInt($( this ).val()));
    });
    $( "select[name^='tax']" ).each(function( index ) {
        taxArr.push(parseInt($( this ).val()));

    }); 
    for(i = 0; i< qtyArr.length; i++)
    {
        console.log(qtyArr[i] +"*"+ priceArr[i] + "*" + taxArr[i])
        rowTotal = qtyArr[i] * priceArr[i] * (1-taxArr[i] / 100);
        document.getElementById('result' + (i+1)).innerHTML = rowTotal;
        tableTotal+=rowTotal;
    }
    document.getElementById('result').innerHTML = "tableTotal: " + tableTotal;
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    output();
}

---

只要名称标签使用相同的名称，就可以使用：

function calcTotal () {
  var sum = 0;
  $('input[name=add_price]').each(function(id, el){
sum += $(el).val();
  });
  return sum;
}
total();

---

非常感谢，效果很好，还有一件事我正在努力。。。我想显示每个产品行后面的行总数。。。有什么建议吗？再次非常感谢！您可以在addRow函数的每一行中添加一个id为rowResult[rowNum]的div，并在输出中设置它，就像您获取输入值一样。带有$div[id^=rowResult]。每个；嗯，我试过了，但它仍然没有显示每行的值，很遗憾。。。奇怪的是。。。它仅在提交时更改为“总计”字段。。。当我使用onchange。。。它不应该像那样直接显示吗？请编辑您的问题以反映您所做的更改，以便我可以评论/回答。我在第一篇文章中更改了代码。。。希望你能看到哪里出了问题。。。谢谢