從HTML中的表格在JavaScript中創建數組

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>

因此，在onChange調用total（'1'，'5.99'）和total（'2'，'105.99'）。

使用JQuery，使用'this'+選擇器會更容易

Answer 2

從兩個number類型輸入中刪除內聯onchange事件，並在script標簽之間的head標簽內粘貼以下代碼

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

這里的例子 。