我已经在这个问题上绞尽脑汁了好几个小时了。我一直在尝试使用我在Google上找到的其他订单表单中的JavaScript并根据我的需要对其进行修改，但我在这方面缺乏专业知识是我现在最大的障碍。我想知道这里是否有人可以帮助我。如果你能帮我解决问题，我会非常乐意在你的PayPal账户中投入20美元。
这正是我想要完成的，但作为网络表单：http://justinwhalley.net/orderform/orderform.xlsx
这是我编写的网页表单，但没有与之相关的Javascript：http://justinwhalley.net/orderform/
需要进行计算......
对于每个部件/产品：
对于订单总计...
非常感谢任何帮助，希望其他人也能从这个解决方案中受益。
提前致谢， 贾斯汀。
<form>
<table id="order-table">
<tr>
<th class="part-number">Part #</th>
<th class="units-per-box">Units Per Box</th>
<th class="distributor-value">Distributor Value</th>
<th class="ordered-boxes">Boxes</th>
<th class="free-boxes">Free Boxes</th>
<th class="total-units">Total Units</th>
<th class="part-subtotal">Subtotal with Promo</th>
</tr>
<tr class="part-heading">
<td colspan="7">ROOF VENTS - 45, 50 & 85 Sq. Inch Roof Vent. (RR - Rodent Resistant)</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT1045</td>
<td class="units-per-box">12</td>
<td class="distributor-value">$<span>11.34</span></td>
<td class="ordered-boxes"><select name="at1045-ordered-boxes" class="ordered-boxes-input" id="at1045-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1045-free-boxes" name="at1045-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1045-total-units" name="at1045-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1045-part-subtotal" name="at1045-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-row even">
<td class="part-number">AT1050</td>
<td class="units-per-box">12</td>
<td class="distributor-value">$<span>12.96</span></td>
<td class="ordered-boxes"><select name="at1050-ordered-boxes" class="ordered-boxes-input" id="at1050-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1050-free-boxes" name="at1050-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1050-total-units" name="at1050-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1050-part-subtotal" name="at1050-part-subtotal" disabled="disabled" /></td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT1050-RR</td>
<td class="units-per-box">12</td>
<td class="distributor-value">$<span>19.04</span></td>
<td class="ordered-boxes"><select name="at1050rr-ordered-boxes" class="ordered-boxes-input" id="at1050rr-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1050rr-free-boxes" name="at1050rr-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1050rr-total-units" name="at1050rr-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1050rr-part-subtotal" name="at1050rr-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-row even">
<td class="part-number">AT1085</td>
<td class="units-per-box">9</td>
<td class="distributor-value">$<span>19.44</span></td>
<td class="ordered-boxes"><select name="at1085-ordered-boxes" class="ordered-boxes-input" id="at1085-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1085-free-boxes" name="at1085-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1085-total-units" name="at1085-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1085-part-subtotal" name="at1085-part-subtotal" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">ROOF ROLL VENT - 20' All in One Roll</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT2020</td>
<td class="units-per-box">6</td>
<td class="distributor-value">$<span>77.76</span></td>
<td class="ordered-boxes"><select name="at2020-ordered-boxes" class="ordered-boxes-input" id="at2020-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at2020-free-boxes" name="at2020-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at2020-total-units" name="at2020-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at2020-part-subtotal" name="at2020-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">EXHAUST VENTS - 4" Exhaust Vent (AT1050 Style)</td>
</tr>
<tr class="part-row even">
<td class="part-number">AT3010</td>
<td class="units-per-box">8</td>
<td class="distributor-value">$<span>12.96</span></td>
<td class="ordered-boxes"><select name="at3010-ordered-boxes" class="ordered-boxes-input" id="at3010-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at3010-free-boxes" name="at3010-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at3010-total-units" name="at3010-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at3010-part-subtotal" name="at3010-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">EXHAUST VENT ADAPTER - 4-6" Adapter for Bathroom or Range Hood fan for AT1050 ONLY</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT3022</td>
<td class="units-per-box">8</td>
<td class="distributor-value">$<span>13.23</span></td>
<td class="ordered-boxes"><select name="at3022-ordered-boxes" class="ordered-boxes-input" id="at3022-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at3022-free-boxes" name="at3022-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at3022-total-units" name="at3022-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at3022-part-subtotal" name="at3022-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">INTAKE VENT - Air Intake Vent</td>
</tr>
<tr class="part-row even">
<td class="part-number">AT7045</td>
<td class="units-per-box">8</td>
<td class="distributor-value">$<span>19.71</span></td>
<td class="ordered-boxes"><select name="at7045-ordered-boxes" class="ordered-boxes-input" id="at7045-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at7045-free-boxes" name="at7045-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at7045-total-units" name="at7045-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at7045-part-subtotal" name="at7045-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">VENT ACCESSORIES - Wave Deflector</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT9010</td>
<td class="units-per-box">48</td>
<td class="distributor-value">$<span>2.00</span></td>
<td class="ordered-boxes"><select name="at9010-ordered-boxes" class="ordered-boxes-input" id="at9010-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at9010-free-boxes" name="at9010-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at9010-total-units" name="at9010-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at9010-part-subtotal" name="at9010-total-units" disabled="disabled" /></td>
</tr>
<tr>
<th colspan="3"></th>
<th colspan="2">Total Boxes</th>
<th>Total Units</th>
<th>Subtotal with Promo</th>
</tr>
<tr>
<td class="subtotal" colspan="3">Subtotal:</td>
<td colspan="2"><input type="text" class="total-boxes-input" id="total-boxes" disabled="disabled" /></td>
<td><input type="text" class="total-units-input" id="total-units" disabled="disabled" /></td>
<td><input type="text" class="subtotal-input" id="subtotal" disabled="disabled" /></td>
</tr>
<tr class="instructions">
<td colspan="3"></td>
<td colspan="2">Must be 18 or under</td>
<td colspan="2"></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Subtotal:</td>
<td><input type="text" class="subtotal-input" id="subtotal" disabled="disabled" /></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Subtotal With Tax:</td>
<td><input type="text" class="subtotal-tax-input" id="subtotal-tax" disabled="disabled" /></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Shipping & Handling:</td>
<td><input type="text" class="shipping-handling" id="shipping-handling" disabled="disabled" value="10" /></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Order Total:</td>
<td><input type="text" class="order-total" id="order-total" disabled="disabled" /></td>
</tr>
</table>
</form>
答案 0 :(得分：1)
以下脚本应该完成工作（记得更新所选选项的值，现在它们在代码中都是1）：
<script type="text/javascript">
$table = $('#order-table');
calculateFormFields();
$(document).ready(function () {
$table.find('.ordered-boxes-input').bind('click', function () {
calculateFormFields();
});
});
function calculateFormFields() {
var rows = $table.find('tr');
var SubtotalTotalBoxes = 0;
var SubtotalTotalUnits = 0;
var Subtotal_SubWithPromo = 0;
var Total_Subtotal = 0;
var Total_SubtotalWithTax = 0;
var OrderTotal = 0;
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var numberOfBoxes = 0;
//Free boxes
var orderedInput = $(row).find('.ordered-boxes-input');
if (orderedInput.length == 1) {
numberOfBoxes = parseInt(orderedInput.val());
$(row).find('.free-boxes-input').val(numberOfBoxes);//Set number of boxes selected
$(row).find('.total-units-input').val(numberOfBoxes * 2);//Set number of total units
var distributorValueSpan = $($(row).find('.distributor-value')[0]).text();
var distributorValue = parseFloat(distributorValueSpan.replace('$',''));
var unitsPerBox = $($(row).find('.units-per-box')).text();
unitsPerBox = parseFloat(unitsPerBox.replace('$',''));
var subtotal = distributorValue * unitsPerBox * numberOfBoxes;
SubtotalTotalBoxes += numberOfBoxes;
SubtotalTotalUnits = SubtotalTotalBoxes * 2;
Subtotal_SubWithPromo += subtotal;
$(row).find('.part-subtotal-input').val(subtotal);
}
}
Total_Subtotal = Subtotal_SubWithPromo;
Total_SubtotalWithTax = Total_Subtotal * 1.13;
OrderTotal = Total_SubtotalWithTax + 10;
$('#total-boxes').val(SubtotalTotalBoxes);
$('#total-units').val(SubtotalTotalUnits);
$('#subtotal').val(Subtotal_SubWithPromo.toFixed(2));
$('.totals').find('#subtotal').val(Subtotal_SubWithPromo.toFixed(2));
$('#subtotal-tax').val(Total_SubtotalWithTax.toFixed(2));
$('#order-total').val(OrderTotal.toFixed(2));
}
</script>