Question

我正在创建一个简单的购物车原型，并希望创建一个JavaScript数组，它将获取每个表行的数量，乘以价格，并显示最终列中的总数。数量值是用户输入数量的表单。我还想包括一个总计的表格行。我有这两个函数，但我想知道如何使一个函数适用于整个表：

<script type="application/javascript">
 function total()
 {
var qty = document.forms["qty"]["amount"].value;
var sum1 = qty * 5.99;
document.getElementById("total1").innerHTML="$" + sum1;
 }
</script>

<script type="application/javascript">
 function total2()
 {
var qty2 = document.forms["qty2"]["amount2"].value;
var sum2 = qty2 * 105.99;
document.getElementById("total2").innerHTML="$" + sum2;
 }
</script>

表格

<table id="cart">
<tr>
<th><b>Quantity</b></th>
<th><b>Item</b></th>
<th>Price</b></th>
<th><b>Total</b></th>          
</tr> 
<tr>
<td><form name="qty"><input type="number" name="amount" size="1" value="1" onchange="total1()"/></form></td>
<td>Product 1</td>
<td>$5.99</td>
<td id="total1"></td>
</tr>
<tr>
<td><form name="qty2"><input type="number" name="amount2" size="1" value="1" onchange="total1()"/></form></td>
<td>Product 2</td>
<td>$105.99</td>
<td id="total2"></td>
</tr>
<tr>
<td><b>Grand Total<b></td>
<td id="grand"></td>
</tr>
</table>

Answer 1

您可以为每个表设置一个id并将其传递给函数：

<script type="application/javascript">
function total(i, value)
{
    var qty = document.forms["qty" + i]["amount" + i].value;
    var sum1 = qty * value;
    document.getElementById("total" + i).innerHTML="$" + sum1;
}
</script>

所以，拨打总计（＆＃39; 1＆＃39;，＆＃39; 5.99＆＃39;）和总计（＆＃39; 2＆＃39;，＆＃39; 105.99＆＃39;）at的onChange。

使用JQuery可以更轻松地使用＆＃39;这个＆＃39; +选择器

Answer 2

从onchange类型输入中移除内联number事件，并在head标记之间的script标记内粘贴以下代码

(function grandTotal()
{
    var cart=document.getElementById('cart'),
    forms=cart.getElementsByTagName('form'), total=0;
    for(var i=0;i<forms.length;i++)
    {
        var amount=forms[i].getElementsByTagName('input')[0];
        var qty=amount.value;
        var tr=forms[i].parentNode.parentNode;
        var price=tr.getElementsByTagName('td')[2].innerHTML.substr(1);
        total+=parseFloat(qty)*parseFloat(price);
        amount.onchange=grandTotal;
    }
    document.getElementById('grand').innerHTML=total.toFixed(2);
})();

Example Here

使用HTML中的表在JavaScript中创建数组

2 个答案: