我是Javasript的新手,发现我在下面使用的javascript代码来自我修改过的其他来源。我正在尝试在显示整个表单总数的每个权益的第三列上显示小计。我在显示小计时遇到了困难。这是我的代码。非常感谢您的任何帮助。谢谢!
<table cellpadding="5" cellspacing="3" style="font-size:10px;color: #1666AF; line-height:2.1;" width="280">
<tbody>
<tr>
<td width="60%"><span style="color: #DF2727; font-weight:bold;">Benefits</span></td>
<td width="20%" align="center" ><span style="color: #DF2727; font-weight:bold;">Qty</span></td>
<td width="20%"><span style="color: #DF2727; font-weight:bold;">Savings</span></td>
</tr>
<tr>
<td>Benefit 1</td>
<td align="center">
<select id="qty" name="BENE_1_800" onchange="CalculateEstimatedSavings(this.form)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td align="left"><span id="order_subtotal_1">$0.00</span></td>
</tr>
<tr>
<td>Benefit 2</td>
<td align="center"><select id="qty" name="BENE_2_266" onchange="CalculateEstimatedSavings(this.form)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<td align="left"><span id="order_subtotal_2">$0.00</span></td>
</tr>
<tr>
<td>Benefit 3</td>
<td align="center"><select id="qty" name="BENE_3_100" onchange="CalculateEstimatedSavings(this.form)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> </td>
<td align="left"><span id="order_subtotal">$0.00</span></td>
</tr>
<tr>
<td>Benefit 4</td>
<td align="center"><select id="qty" name="BENE_4_25" onchange="CalculateEstimatedSavings(this.form)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> </td>
<td align="left"><span id="order_subtotal">$0.00</span></td>
</tr>
<tr>
<td>Benefit 5</td>
<td align="center"><select id="qty" name="BENE_5_25" onchange="CalculateEstimatedSavings(this.form)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> </td>
<td align="left"><span id="order_subtotal">$0.00</span></td>
</tr>
<tr>
<td>Benefit 6</td>
<td align="center"><select id="qty" name="BENE_6_25" onchange="CalculateEstimatedSavings(this.form)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> </td>
<td align="left"><span id="order_subtotal">$0.00</span></td>
</tr>
<tr>
<td>Benefit 7</td>
<td align="center"><select id="qty" name="BENE_7_773" onchange="CalculateEstimatedSavings(this.form)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> </td>
<td align="left"><span id="order_subtotal">$0.00</span></td>
</tr>
</tbody>
</table>
<table cellpadding="5" cellspacing="3" style="color: #1666AF; font-size:13px; font-weight:bold;" width="280">
<tbody>
<tr>
<td width="62%"><span>Estimated Total Savings:</span></td>
<td align="left" width="38%"><span id="total_savings">$0.00</span></td>
</tr>
</tbody>
</table>
<div style="width:280px; clear:both;"><a href="#" style="border:none; float:right;"><img src="start-saving_sm.png" /></a></div>
</fieldset>
</form>
<script type="text/javascript">
function CalculateEstimatedSavings(frm) {
var total_savings = 0
// Run through all the form fields
for (var i=0; i < frm.elements.length; ++i) {
// Get the current field
form_field = frm.elements[i]
// Get the field's name
form_name = form_field.name
// Is it a "product" field?
if (form_name.substring(0,4) == "BENE") {
// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 0) {
total_savings += item_quantity * item_price
}
}
}
// Display the total rounded to two decimal places
document.getElementById("total_savings").firstChild.data = "$" + round_decimals(total_savings, 2)
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(".")
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}
</script>
答案 0 :(得分:0)
您可以在循环中添加这段代码,或者移出循环以仅更新当前tr的单元格。在CalculateEstimatedSavings
函数
form_field.parentElement.nextElementSibling.getElementsByTagName('span')[0].textContent="$" + round_decimals( item_quantity * item_price, 2)
http://jsfiddle.net/Srq9v/1/看这里
小心nextElementSibling
功能,我不确定IE何时支持它。