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發票中的小計和總計

回答

相關問題