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

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

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

3回复

jQuery / js-根据状态和数量选择选项计算税额,小计和总计

我是js / jQuery的新手。 原谅这个可怕的剧本。 我迷路了。 *(根据建议,使用全局变量ifTaxRate更新。)* 我正在尝试根据客户的选定状态和订购数量来计算税款,小计和总计,并在屏幕上动态显示。 如果客户来自爱达荷州,我想采用6%的销售税率。 选择选项
2回复

使用js计算发票的小计

我有三件事我不能弄清楚,只是学习JS,但我将从第一个开始 好的,昨天我得到了几个人的帮助,其中一个建议我不要将总计放在文本字段中,我必须弄清楚该怎么做。 因此,我在产品中加入了一个下拉菜单,根据您选择的产品,该商品的相应价格会出现在每列价格中。 现在我遇到的问题是获取物料价格X数量
2回复

用javascript计算小计和总计

我正在尝试将两个值加在一起。 #price的值和#subtotal的值。 小计正在使用Jquery脚本计算并且正在运行。 另一个脚本不起作用,但可以单独起作用。 div的#price,#subtotal和#total必须是div的,并且不能更改为带值的文本字段。 码:
1回复

表小计和总计未计算

我有一个包含表头和动态添加行的表。 我想计算小计和总计。 我成功创建了添加行。 当我尝试放入数据时,未显示总计 我尝试这样,但不起作用 $(document).ready(function() { addRow(); var $tblrows = $("#deta
2回复

如何使用JS中的操作计算小计的值

在此方案中,有一个单选按钮,它将检查具有1作为“值”的单选,并且总计将显示在sub_total中。 我已经获得了sub_total的值,但是在这种情况下sub_total必须以%的值表示并具有一个操作。这是sub_total的操作: “值” / 4 * 30%= _____% 这是
1回复

项目和总计的jQuery发票计算

我是JavaScript新手。 我目前面临的问题: 当您添加新行时,它会添加行(太好了!),但是添加的第一个新行很好用,在名称/ id的末尾应用_0,但是当您添加更多行时,它不会执行_1,_2等。而是_1_1,_2_2_2,_3_3_3_3-关于如何解决该问题的任何想法?
1回复

如何使用jQuery计算小计和总计?

我有此表格,需要计算2个小计中的项目,并将这些小计求和成一个总数。 我只能得到subTotal1和subTotal2的总和,但是总计算失败了,因为它没有线索来计算平均值(不是公式,而是JavaScript代码)。 这是我的代码: $(document).on("cha
2回复

jQuery Calculation插件:汇总小计以创建总计

我正在页面上使用jQuery Calculation Plugin ,我在其中进行数量x价格计算,然后将其加到小计中。 重复4次。 每4个一组涉及具有不同ID和不同计算(不仅仅是价格x数量)的字段。 4个小计字段的ID为subtotal_events,subtotal_raffle
4回复

如何在JavaScript中计算小计和总计?

我需要的是将所有图像相加,但我做不到 如下代码如何将数量乘以单位价格后总计所有金额? 这是HTML元素 这是Javascript代码,此js只能从数量等于数量=数量*数量的单价中总计 结果应为Result = amount + amount1 + amount2 + a
3回复

分组行中的小计

我使用的是jQuery Datatables,在我的表中,我按照表的第一列中的值进行分组,并以组的形式显示所有具有匹配的第一列的数据。 我希望在每个分组的行内显示“小计”行。 这是我的桌子现在的样子的一个例子: 我想从“小计”行中获取单元格并将其放在分组的行中。 像这样: