1

我能够创建模板，但我不确定从这里做什么。

当我单击添加项目按钮时，我希望值进入我在底部创建的文本区域，并在我不断添加项目时更改小计和总计。

<html>
    <head>
        <meta charset = "utf-8">


        <h1>Invoice Manager</h1>

        <style type "text/css">
        div      {position: absolute;
                  top: 200px;
                  left: 90px;
                  z-index: 1;}
        </style>

        <script type = "text/javascript">

        </script>


    </head>

    <body>

        <table>

            <tr>
              <td align="right">Item Code:</td>
              <td align="left"><input type="text" name="code" /></td>
            </tr>

            <tr>
              <td align="right">Item Name:</td>
              <td align="left"><input type="text" name="itemName" /></td>
            </tr>

            <tr>
              <td align="right">Item Cost:</td>
              <td align="left"><input type="text" name="cost" /></td>
            </tr>

            <tr>
              <td align="right">Quantity:</td>
              <td align="left"><input type="text" name="quantity" /></td>
            </tr>
          </table>

          <div id="AddItemButton">
            <td align = "left"><input type="submit" name="Submit" value="Add Item"></td>
          </div>

        </form>

     <br></br> <br></br>
    <font size = "5">Current Invoice</font>

    <hr style = "height:2px;border:none;color:#333;background-color:#333;"></hr>

    <p><label> <br>
            <textarea name = "textarea"
                rows = "12" cols = "180"></textarea>
            </label></p>    

    <form>
            <table>

            <tr>
              <td align="right">Subtotal:</td>
              <td align="left"><input type="text" name="subtotal" /></td>
            </tr>

            <tr>
              <td align="right">Sales Tax:</td>
              <td align="left"><input type="text" name="tax" /></td>
            </tr>

            <tr>
              <td align="right">Total:</td>
              <td align="left"><input type="text" name="total" /></td>
            </tr>

          </table>
    </form>


    <form>      
        <input type = "button" value = "Add Item" onclick="textarea"/> <input type = "text" id = "cost" size ="20" />
    </form>

这就是我的模板。当我在这些字段中输入项目代码、项目名称、项目成本和数量时，我希望将这些值放在底部的文本区域中。我想我需要在脚本中写一些东西。

我不确定如何实现这一点，但我认为用户添加的第一批信息可能等于一个变量，例如a

然后输入的第二个值可以等于b

因此，假设用户添加了 3 个项目。

总计 = (a + b + c)

或类似的东西。

这是一个“添加项目”会做什么的示例。我希望这些提交内容出现在我创建的文本字段中

---Item Code---         ---Item Name---      ---Item Cost---       ---Quantity---

     3                        Dell              499                  1

关于我能做什么的任何想法？我不知所措

谢谢

编辑：我正在添加我的脚本，我想知道它是否有问题

<script type = "text/javascript">
        function computeCost(){
            var code = document.getElementById("code").value;
            var a = code; // item code

            var itemName = document.getElementById("itemName").value;
            var b = itemName; // item name

            var cost = document.getElementById("cost").value;
            var c = cost; // calculate cost 

            var quantity = document.getElementById("quantity").value;
            var d = quantity; // calculate quantity of items

            var subtotal = document.getElementById("subtotal").value;
            var e = c * d; // multiplying cost by quantity = subtotal

            var tax = document.getElementById("tax").value;
            var f = e * .7; // multiplying subtotal by tax(.7) = amount of tax owed

            var total = document.getElementById("total").value;
            var g = f + e; //adding tax to subtotal = total value

            document.getElementByID("yo").value = total;



        }

        function clear()
            {
        document.getElementById("a","b","c","d", "e", "f", "g").reset();
            } // end of clear

        </script>
4

2 回答 2

1

我没有太多时间提供一个优美的脚本，但这提供了基本功能 编辑：添加脚本标签和基本的 JQUERY 事情注意，由于从 Internet 加载 JQUERY，如果您希望在没有 Internet 的情况下使用它，它不会在没有 Internet 连接的情况下工作con，下载脚本并在本地链接

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type = "text/javascript">
          $(function(){
  var textContent = $('textarea').val();
    var textRow = "";
    $('input[type=submit]').click(function(){
      $('input[type=text]').each(function(){
        textRow = textRow+$(this).val()+'\t';
      });
      textContent = textContent + '\n' + textRow;
      textRow = "";
      $('textarea').val(textContent);

    });  
});  
        </script>
于 2014-10-20T18:19:01.083 回答
1

这只是必要的 JS 和 HTML，没什么特别的：

function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
function val(){
  val1 = parseInt(id("t1").value);
  val2 = parseInt(id("t2").value);
  id("total").innerHTML = ((val1 > 0 && val2 > 0))? val1 * val2 : 0;
}
<input id="t1" onkeyup="val()" type="number">
<input id="t2" onkeyup="val()" type="number">
<h1 id="total"></h1>

于 2014-10-20T18:23:38.307 回答