在動態創建表上執行函數

我正在使用PHP從mySQL數據庫檢索30個麪包項目到動態HTML表中。檢索的數據是產品,項目（主鍵），重量和價格。我的代碼還會爲每個項目創建一個名爲Quantity的INPUT框，以便用戶可以鍵入他想要的多少個案例。下面是用來生成動態表的代碼段：在動態創建表上執行函數

 $i=0; 

    while ($i < $num) { 
     $Item=mysql_result($result,$i,"Item"); 
     $Product=mysql_result($result,$i,"Product"); 
     $Weight=mysql_result($result,$i,"Weight"); 
     $BGPrice=mysql_result($result,$i,"BGPrice"); 

    echo "<tr>"; 
    echo "<td>$Product</td>"; 
    echo "<td><INPUT NAME=Item size=5 value=$Item READONLY></td>"; 
    echo "<td><INPUT NAME=Weight size=5 value=$Weight READONLY></td>"; 
    echo "<td><INPUT NAME=Price size=5 value=$BGPrice READONLY></td>"; 
    echo "<td><INPUT NAME=Quantity size=5 value=0 tabindex=$i></td>"; 
    echo "<td><INPUT NAME=ExtPrice size=5 value=0 READONLY></td>"; 
    echo "<td><INPUT NAME=TotalWt size=5 value=0 READONLY></td>"; 
    echo "</tr>"; 

    $i++; 
    }

我需要的JavaScript儘快調用一個函數，計算擴充價格的值（ExtPrice）和重量（TotalWt）因爲用戶輸入了他想要訂購的案例數量。

這就是我的奮鬥目標：這個動態表格中有30個項目，每個項目的輸入名稱都是相同的。我如何創建一個功能更新ExtPrice和TotalWt爲每個單獨的產品？

來源

2011-02-23 Sterve

您的JavaScript不應直接引用每個input的名稱。相反，獲取對同一行中相鄰單元格的引用。

假設你有一個提交按鈕，重新計算的結果，這裏有一個例子：

document.getElementById("sub").addEventListener("click", function(e) { 
    var i, row; 
    var rows = document.getElementsByTagName("tr"); 
    // process each row individually 
    for (i = 0, row; row = rows[i++];) { 
     totalsForRow(row); 
    } 
    e.preventDefault(); 
}, false); 

// updates the totals for each row 
function totalsForRow(tr) { 
    var j, inp, fields = {}; 
    var inputs = tr.getElementsByTagName("input"); 
    if (!inputs || inputs.length === 0) 
     return; 
    // map each input by name 
    for (j = 0; inp = inputs[j++];) { 
     fields[inp.name] = inp; 
    } 
    // update totals for this row, using the stored ref to the input 
    fields.TotalWt.value = fields.Weight.value * fields.Quantity.value; 
    fields.ExtPrice.value = fields.Price.value * fields.Quantity.value; 
}

這並不做任何錯誤檢查，並在幾個方面還有待改進。這只是爲了說明一種方法。

查看working example。

來源

2011-02-23 20:55:35

嘿，謝謝您的幫助。我獲得了每個訂單項的更新。 – Sterve 2011-02-24 21:56:17