js发票中的小计和总计
[英]subtotals and grand total in js invoice
问题描述
我不知道该怎么做，所以我会以丑陋的方式做。
我已经尝试了一个星期，用JS完成此发票系统，但是我被困住了。
我已经能够获得price per * quantity = subtotal才能工作，但是仅对于一行，我需要为发票增加3行，但绝对不知道如何合并其他3行，每行每price per * quantity = subtotal ，然后该列中的所有4个小计在TOTAL跨度中求和，我将在此处发布所有代码。
JavaScript：
var item = document.getElementById('item');
var a = document.getElementById('price');
var a = document.getElementById('qty');
item.onchange = function() {
price.innerHTML = "$" + this.value;
qty.value = 1; //Order 1 by default.
add();
};
qty.onchange = function() {
add();
}
function add() {
var a = document.getElementById('item').value,
b = document.getElementById('qty').value;
document.getElementById('result').innerHTML = "$" + (a * b);
document.getElementById('Total').innerHTML = "$" + (a * b) * 1.06;
}
HTML：
<form name="frm">
<p><img src="strata/longwaylogoblk.png" width="230" height="50"></p>
<p>Customer Invoice</p>
<table width="38%" border="0">
<tr>
<td width="31%"><div align="left">Eclipse Cellular</div></td>
<td width="23%"> </td>
<td width="10%">Name</td>
<td width="36%"> </td>
</tr>
<tr>
<td><div align="left">2441 Foothill Blvd #1143</div></td>
<td> </td>
<td>Address</td>
<td> </td>
</tr>
<tr>
<td><div align="left">Rock Springs, WY, 82901</div></td>
<td> </td>
<td>Phone</td>
<td> </td>
</tr>
<tr>
<td><div align="left">307-212-6886</div></td>
<td> </td>
<td>Email</td>
<td> </td>
</tr>
</table>
<br />
<br />
<table id="invoice" width="43%" border="0">
<tr bgcolor="#B80000">
<td width="9%"><div align="center">ID</div></td>
<td width="31%">
<div align="center">Item Description</div>
</td>
<td width="17%">
<div align="center">Price Per</div>
</td>
<td width="13%">
<div align="center">Quantity</div>
</td>
<td width="13%">
<div align="center">SubTotal</div>
</td>
</tr>
<tr>
<td><div align="center">1</div></td>
<td>
<div align="center">
<select name="item" id="item" size="1">
<option value="">Device</option>
<option value="200">iPhone 4</option>
<option value="300">iPhone 4S</option>
<option value="450">iPhone 5</option>
<option value="300">Galaxy S3</option>
<option value="450">Galaxy S4</option>
<option value="450">Galaxy Note ll</option>
<option value="600">Galaxy Note lll</option>
<option value="700">Galaxy S5</option>
<option value="500">HTC One</option>
<option value="650">HTC One M8</option>
</select>
</div>
</td>
<td height="43">
<div align="center"><span id="price"></span></div>
</td>
<td>
<div align="center">
<input name="qty" type="Text" id="qty" size="2" maxlength="3"/>
</div>
</td>
<td>
<div align="center">
<span id="result"></span>
</div>
</td>
</tr>
<tr>
<td><div align="center">2</div></td>
<td>
<div align="center">
<select name="item1" id="item1" size="1">
<option value="">Device</option>
<option value="200.00">iPhone 4</option>
<option value="300.00">iPhone 4S</option>
<option value="450.00">iPhone 5</option>
<option value="300.00">Galaxy S3</option>
<option value="450.00">Galaxy S4</option>
<option value="450.00">Galaxy Note ll</option>
<option value="600.00">Galaxy Note lll</option>
<option value="700.00">Galaxy S5</option>
<option value="500.00">HTC One</option>
<option value="650.00">HTC One M8</option>
</select>
</div>
</td>
<td height="43">
<div align="center"><span id="price1"></span></div>
</td>
<td>
<div align="center">
<input name="qty1" type="Text" id="qty1" size="2" maxlength="3"/>
</div>
</td>
<td>
<div align="center">
<span id="result1"></span>
</div>
</td>
</tr>
<tr>
<td><div align="center">3</div></td>
<td>
<div align="center">
<select name="item2" id="item2" size="1">
<option value="">Service</option>
<option value="35.00">Activation</option>
<option value="20.00">ESN Change</option>
<option value="20.00">Number Change</option>
<option value="60.00">Flashing</option>
<option value="25.00">Discount Activation</option>
<option value="5.00">Rent To Own Late Fee</option>
<option value="150.00">R2O Down Payment</option>
</select>
</div>
</td>
<td height="43">
<div align="center"><span id="price2"></span></div>
</td>
<td>
<div align="center">
<input name="qty2" type="Text" id="qty2" size="2" maxlength="3"/>
</div>
</td>
<td>
<div align="center"><span id="result2"></span></div>
</td>
<td>
</td>
</tr>
<tr>
<td><div align="center">4</div></td>
<td>
<div align="center">
<select name="item3" id="item3" size="1">
<option value="">Airtime</option>
<option value="12.00">PagePlus The 12</option>
<option value="29.95">PagePlus Talk n Text 1200</option>
<option value="39.95">PagePlus Unlimited Talk n Text</option>
<option value="55.00">PagePlus The 55</option>
<option value="69.95">PagePlus Super User</option>
<option value="10.00">10 Cash PIN</option>
<option value="25.00">25 Cash PIN</option>
<option value="50.00">50 Cash PIN</option>
<option value="80.00">80 Cash PIN</option>
<option value="5.00">International (X$5)</option>
</select>
</div>
</td>
<td height="43">
<div align="center"><span id="price3"></span></div>
</td>
<td>
<div align="center">
<input name="qty3" type="Text" id="qty3" size="2" maxlength="3"/>
</div>
</td>
<td>
<div align="center"><span id="result3"></span></div>
</td>
<td>
</td>
</tr>
<tr>
<tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td height="44">
<div align="center"></div>
</td>
<td>
<div align="center"><font color="#336699" size="3"><b>TOTAL:</b></font></div>
</td>
<td>
<div align="center"><span id="Total"></span></div>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td><div align="center"></div></td>
<td height="44"><div align="right">
<input type="button" value="Exit" onclick="window.location.reload();" />
</div></td>
<td><div align="right">
<input name="add" type="button" value="Add Row" onclick="addRow('invoice')"/>
</div></td>
<td><div align="center">
<input name="save" type="button" value="Save" />
</div></td>
<td> </td>
</tr>
</table>
</form>
我知道我的TOTAL跨度有误，但是您可以在这里找到适用的版本
1 个解决方案
解决方案1
0 已采纳 2014-04-20 02:35:31
复制此代码
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
var item3 = document.getElementById('item3');
item.onchange = function() {
add();
};
item1.onchange = function() {
add();
};
item2.onchange = function() {
add();
};
item3.onchange = function() {
add();
};
function add() {
var inputs = document.getElementsByTagName('input');
var selects = document.getElementsByTagName('select');
var total = 0;
for (var i = 0; i < selects.length; i++) {
var sum = 0;
var price = (parseFloat(selects[i].value) )?parseFloat(selects[i].value):0;
var qty = (parseFloat(inputs[i].value) )?parseFloat(inputs[i].value):0;
sum += price * qty;
total += sum * 1.06;
if(i == 0){
document.getElementById('result').innerHTML = "$" + sum;
}else{
document.getElementById('result'+i).innerHTML = "$" + sum;
}
};
document.getElementById('Total').innerHTML = "$" + total;
}
jQuery Calculation插件：汇总小计以创建总计
[英]jQuery Calculation Plugin: Summing subtotals to create grand total
使用 Wcf 服务在 Angular Js 应用程序中添加总计
[英]Adding Grand Total In Angular Js Application by using Wcf Service
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.