在发票中自动计算价格

Question

我正在制作发票系统，我希望自动计算价格文本框。我在发票中有一张随机行表。我如何通过价格文本框上的js函数来完成。

<SCRIPT language="javascript">
var rowCount =0;
    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name = "chk[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "item[]";
        element2.required = "required";
        cell3.appendChild(element2);

        var cell4 = row.insertCell(3);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "qty[]";
        cell4.appendChild(element3);

        var cell5 = row.insertCell(4);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "cost[]";
        cell5.appendChild(element4);

        var cell5 = row.insertCell(4);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "price[]";
        cell5.appendChild(element4);



    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

</SCRIPT>

这是身体

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

            <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
        <form action="" method="post" enctype="multipart/form-data">
        invoice:<INPUT type="text" name="invoice id"/>

            <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;">
        <TR>
        <TH>Select</TH>
        <TH>Sr. No.</TH>
        <TH>Item</TH>
        <TH>Cost</TH>
        <TH>Qty</TH>
        <TH formula="cost*qty"summary="sum">Price</TH>
        </TR>
                <TR>
                    <TD><INPUT type="checkbox" name="chk[]"/></TD>
                    <TD> 1 </TD>
                    <TD> <INPUT type="text" name="item[] "/> </TD>
                    <TD> <INPUT type="text" name="qty[]"/> </TD>
                    <TD> <INPUT type="text" name="cost[]" /> </TD>
                    <TD> <INPUT type="text" name="price[]" /> </TD>
                </TR>

            </TABLE>
        <input type="submit" />
 </form>

Answer 1

DEMO

根据标题单元格，您在错误的单元格中有成本和QTY！

 <TD> <INPUT type="text" id="qty1" name="qty[]"/> </TD>
 <TD> <INPUT type="text" id="cost1" name="cost[]" /> </TD>
 <TD> <INPUT type="text" id="price1" name="price[]" /> </TD>

新代码：

function calc(idx) {

  var price = parseFloat(document.getElementById("cost"+idx).value)*
              parseFloat(document.getElementById("qty"+idx).value);
  //  alert(idx+":"+price);  
  document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2)
}

window.onload=function() {
  document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
  document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}

var rowCount =0;
function addRow(tableID) {
        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name = "chk[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "item[]";
        element3.required = "required";
        cell3.appendChild(element3);

        var cell4 = row.insertCell(3);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "qty[]";
        element4.id = "qty"+rowCount;
        element4.onkeyup=function() {calc(rowCount);}
        cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "cost[]";
        element5.id = "cost"+rowCount;
        element5.onkeyup=function() {calc(rowCount);}
        cell5.appendChild(element5);

        var cell6 = row.insertCell(5);
        var element6 = document.createElement("input");
        element6.type = "text";
        element6.name = "price[]";
        element6.id = "price"+rowCount
        cell6.appendChild(element6);



    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

这是一个总计 - 如果你将calc切割并粘贴到我做calc（i）

的地方，你实际上可以用这个替换calc

function totalIt() {
  var qtys = document.getElementsByName("qty[]");
  var total=0;
  for (var i=1;i<=qtys.length;i++) {
    calc(i);  
    var price = parseFloat(document.getElementById("price"+i).value);
    total += isNaN(price)?0:price;
  }
  document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2);                        
}  

Answer 2

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

        <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <form action="" method="post" enctype="multipart/form-data">
    invoice:<INPUT type="text" name="invoice id"/>

        <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;">
    <TR>
    <TH>Select</TH>
    <TH>Sr. No.</TH>
    <TH>Item</TH>
    <TH>Cost</TH>
    <TH>Qty</TH>
    <TH formula="cost*qty"summary="sum">Price</TH>
    </TR>

        </TABLE>
    <input type="submit" />

脚本：

 <SCRIPT language="javascript">
 var rowCount =0;
function calculatePrice(qtyElement, costElement, priceElement) {
        priceElement.value = qtyElement.value * costElement.value;
}

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name = "chk[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount;

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "item[]";
    element2.required = "required";
    cell3.appendChild(element2);

    var cell4 = row.insertCell(3);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "qty[]";
    element3.onchange = function(){
         calculatePrice(this, this.parentElement.parentElement.childNodes[4].childNodes[0], this.parentElement.parentElement.childNodes[5].childNodes[0]);
    };
    cell4.appendChild(element3);

    var cell5 = row.insertCell(4);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "cost[]";
    element4.onchange = function(){
            calculatePrice(this.parentElement.parentElement.childNodes[3].childNodes[0], this, this.parentElement.parentElement.childNodes[5].childNodes[0]);
    };
    cell5.appendChild(element4);

    var cell6 = row.insertCell(5);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "price[]";
    cell6.appendChild(element5);



}

function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }


    }
    }catch(e) {
        alert(e);
    }
}
addRow('dataTable');
</SCRIPT>

Answer 3

将计算绑定到例如键事件。您还应该通过JS创建第一个发票行。

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name = "chk[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount;

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "item[]";
    element2.required = "required";
    cell3.appendChild(element2);

    var cell4 = row.insertCell(3);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "qty[]";
    cell4.appendChild(element3);

    var cell5 = row.insertCell(4);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "cost[]";
    cell5.appendChild(element4);

    var cell5 = row.insertCell(5);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "price[]";
    cell5.appendChild(element5);

    var calcPrice = function() {
        try {
            element5.value = element3.value * element4.value;
        } catch(e) {

        }
    }

    element3.onkeyup = calcPrice;
    element4.onkeyup = calcPrice;
}

Answer 4

您可以在某些输入字段中触发onchange事件时调用的函数内部执行计算（行的最后一行或下一行的第一行计算前一行价格）。

Answer 5

<script type="text/javascript">

    $(function(){


        //add new row 
        $('.add').click(function(){




                    var tr = '<tr>'+
                           '<td><input type="text" name="product_name[]" class="form-control product_name"></td>'+
                           '<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+
                           '<td><input type="text" name="price[]" class="form-control price"></td>'+
                           '<td><input type="text" name="amount[]" class="form-control amount"></td>'+
                           '<td><input type="button"  class="btn btn-danger remove" value="Remove"></td>'+
                      '</tr>';
          $('.details').append(tr);
        });
        // end 



        // total amount 
        $('.details').delegate('.quantity,.price','keyup',function(){
            var tr = $(this).parent().parent();
            var price = tr.find('.price').val();
            var qty   = tr.find('.quantity').val();
            var amount = price * qty;
            tr.find('.amount').val(amount);
            total();
        });

        // end 


        // delete row 
        $('.details').delegate('.remove','click',function(){
                var con = confirm("Do you want to remove it ?");
                if(con)
                {
                    $(this).parent().parent().remove();
                    total();
                }

        });
        // end 



        //get pay
        $('.pay').change(function(){
            var subtotal = $('.subtotal').val()-0;
            var get      = $(this).val()-0;
            $('.return').val(get - subtotal);
        });
        // end 
    });
</script>



          <script type="text/javascript">

             // for updating the tax while writing the price .

               function changeTax(){

                  var price = document.getElementById("price").value;
                  var q = document.getElementById("quantity").value;

                  var np = Number(price);

                 var tax =  (0.15 * np)*q;



                  <!-- how to diferenciate  concatinate anad plus sign-->
                    document.getElementById("amount").value = q * np;

                  var amount = document.getElementById("amount").value;
                  document.getElementById("tax").value = tax;
                  document.getElementById("subtotal").value = Number(tax) + Number(amount);
               }
          </script>
                     <script>
    $(function() {

     });
     </script>