我從數(shù)據(jù)庫(kù)中提取記錄，將它們顯示在帶有表單輸入字段的表行中。這意味著將會(huì)有多行，如下面的示例 html 代碼所示。我只想使用 JavaScript。這個(gè)想法是，當(dāng)用戶(hù)輸入數(shù)量時(shí)，它會(huì)乘以單價(jià)，結(jié)果顯示在小計(jì)字段中。我不是 JS 開(kāi)發(fā)人員，我搜索并找到了下面的代碼，它接近我需要的代碼。如果有人可以提出一些建議以使該代碼正常工作，我將不勝感激。 <SCRIPT language="JavaScript"><!-- function calculate() { var Quantity = document.getElementsByName("Quantity").value; var unitPrice = document.getElementsByName("unitPrice").value; var total = 0; for (var i = 0; i < Quantity.length; i++) { total += parseInt(Quantity[i].value) * parseInt(unitPrice[i]); } document.getElementsByName("subtotal").value = total;} </SCRIPT> <table> <tr><td> <input onblur="calculate()" name="Quantity" size="2" /> <input name="unitPrice" value="5" size="2"/><input name="subtotal" size="2"/> </td> </tr> <tr><td> <input onblur="calculate()" name="Quantity" size="2" /> <input name="unitPrice" value="5" size="2"/><input name="subtotal" size="2"/> </td> </tr> </table>
1 回答
阿波羅的戰(zhàn)車(chē)
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊
有幾點(diǎn)：a）document.getElementsByName("")返回一個(gè) NodeList 元素集合，因此您無(wú)法像這樣獲取每個(gè)輸入的值，您必須在 for 循環(huán)內(nèi)獲取它們；b) 然后您還需要在解析之前獲取unitPrice[i]循環(huán)內(nèi)每個(gè)值的值，c) 每次迭代后應(yīng)重置總數(shù)，因此可以將其放在循環(huán)內(nèi)。見(jiàn)下文：
function calculate() {
var Quantity = document.getElementsByName("Quantity");
var unitPrice = document.getElementsByName("unitPrice");
for (var i = 0; i < Quantity.length; i++) {
if (!Quantity[i].value) continue; // prevent NaN
let total = parseInt(Quantity[i].value) * parseInt(unitPrice[i].value);
document.getElementsByName("subtotal")[i].value = total;
}
}
<table>
<tr>
<td>
<input onblur="calculate()" name="Quantity" size="2" />
<input name="unitPrice" value="5" size="2" />
<input name="subtotal" size="2" />
</td>
</tr>
<tr>
<td>
<input onblur="calculate()" name="Quantity" size="2" />
<input name="unitPrice" value="5" size="2" />
<input name="subtotal" size="2" />
</td>
</tr>
</table>
為了避免得到NaN沒(méi)有任何值的結(jié)果，您可以添加if (!Quantity[i].value) continue;為 for 循環(huán)中的第一行，這應(yīng)該可以防止它。
- 1 回答
- 0 關(guān)注
- 182 瀏覽
添加回答
舉報(bào)
0/150
提交
取消