在发票中自动计算价格

我在制作发票系统，我想要自动计算价格文本框。我在发票中有一张随机行的表格。我如何通过价格文本框上的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>

来源

2012-04-08 azzaxp

DEMO

你可以根据标题单元格有成本和数量在错误的细胞！

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

这是一个总的 - 你其实可以用这个代替钙，如果你剪切和粘贴计算到那里我做计算（I）

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

来源

2012-04-08 10:42:54 mplungjan

谢谢，但它不工作以增加第二排！ chkd in ure demo :) – azzaxp 2012-04-08 11:14:03

是的，错过了ID上的代价。没有时间完成。现在就添加它 – mplungjan 2012-04-08 11:25:28

好吧固定它 - 很多修复 - 重命名元素 – mplungjan 2012-04-08 11:59:09

-1

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

来源

2012-04-08 10:43:03 danielrozo

这是一条评论 – mplungjan 2012-04-08 10:57:00

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

来源

2012-04-08 10:51:07 yannisgu

谢谢，多数民众赞成在为我工作，你可以让我多一个帮助，我如何显示下面的所有价格总数..？堂妹。我需要在php中存储相同的结果。 – azzaxp 2012-04-08 11:24:04

谢谢，我甚至发现。我用php ..但。 – azzaxp 2012-04-08 12:08:44

只需绑定计算，例如，一个关键事件。您应该通过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; 
}

来源

2012-04-08 10:56:37 diewie

它不工作...！对我来说..谢谢任何方式..！ :) – azzaxp 2012-04-08 11:18:19

奇怪...一定要命名元素的权利。您在代码中使用了例如两次变量名称element4。 – diewie 2012-04-08 11:28:12

谢谢得到解决方案.. :) – azzaxp 2012-04-08 12:10:38

-1

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

来源

2016-08-26 11:54:30

它根据用户提供的价格计算税和小计它不能计算当我添加行 – 2016-08-26 11:57:10

请格式化您的代码（缩进4空格） – slfan 2016-08-26 12:14:32

在发票中自动计算价格

回答

相关问题