js发票中的小计和总计

我无法弄清楚如何去做我想做的事，所以我会以丑陋的方式去做。js发票中的小计和总计

我一直在尝试一个星期来获得这个发票系统与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%">&nbsp;</td> 
    <td width="10%">Name</td> 
    <td width="36%">&nbsp;</td> 
    </tr> 
    <tr> 
    <td><div align="left">2441 Foothill Blvd #1143</div></td> 
    <td>&nbsp;</td> 
    <td>Address</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td><div align="left">Rock Springs, WY, 82901</div></td> 
    <td>&nbsp;</td> 
    <td>Phone</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td><div align="left">307-212-6886</div></td> 
    <td>&nbsp;</td> 
    <td>Email</td> 
    <td>&nbsp;</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>&nbsp;</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>&nbsp;</td> 
     </tr> 
    </table> 
</form>

我知道我有总跨度错了，但你的想法，工作版本here

来源

2014-04-20 gomoguy

未分析问题;你会自己帮忙为这个像下划线或句柄一样使用客户端模板引擎。不需要很长时间学习。 – Trace

谢谢我会检查出来 – gomoguy

我最近用jQuery做了这件事。你需要做的是循环浏览你的页面，将每个数量和价格加起来，然后将小计跨度存储在一个变量中，这个变量就是你的总小计。如果你给它一个Google – robobobobo

拷贝代码

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; 
    }

来源

2014-04-20 02:35:31

我真的很感谢coder_ck的帮助，但它不起作用。我复制了代码，并尽可能找到问题，并仔细检查了它，但它什么也没做。但感谢您的帮助，我会继续努力。 – gomoguy

有点调整，我得到它的工作完美，谢谢 – gomoguy

js发票中的小计和总计

回答

相关问题