我不知道该怎么做,所以我会以丑陋的方式做。

我已经尝试了一个星期,用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>

我知道我的TOTAL跨度有误,但是您可以在这里找到适用的版本

===============>>#1 票数:0 已采纳

复制此代码

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

  ask by gomoguy translate from so

未解决问题?本站智能推荐: