請求書の価格を自動的に計算します

請求書システムを作成していますが、私は価格テキストボックスを自動的に計算させたいと思っています。私は、請求書にランダムな行のテーブルを持っています。どのように価格のテキストボックスに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>

は、ここでは、ヘッダーセルに応じて、間違った細胞におけるコストとQTYたボディ

<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

感謝が、その追加2列目のために働いていません！呉デモでchkd :) – azzaxp

ええ、コストのIDを紛失。終了する時間がありませんでした。 – mplungjan

それを修正しました。 - 多くの修正が必要です。名前が変更された要素 – mplungjan

-1

カルクを行う場所にカット＆ペーストカルク場合は、実際にこれでCALCを置き換えることができますonchangeイベントがいくつかの入力フィールド（行の最後または次の行の最初の行が前の行の価格を計算する）で起動されたときに呼び出される関数の中で計算を実装することができます。

出典

2012-04-08 10:43:03 danielrozo

これはコメントです（http://chat.stackoverflow.com/rooms/9871/discussion-between-azzaxp-and-mplungjan） – mplungjan

<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

ありがとう、それは私のために働いて、ちょうど私にもう少し助けてもらえますか？私は下のすべての価格の合計をどのように表示するのですか？ Coz。私はPHPに同じを格納する必要があります.. – azzaxp

ありがとう私はそれを発見した。私はPHPを使用..しかし！ – azzaxp

だけで、例えば、にキーイベントを計算をバインドします。 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

奇妙な...要素の名前を正しく指定してください。変数名element4の2倍など、コード内で使用しました。 – diewie

ありがとうございます:) – azzaxp

-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

私は行を追加するときに計算することができないユーザーbuから与えられた価格に基づいて税金と小計を計算します –

コードをフォーマットしてください（4スペースのインデント） – slfan

請求書の価格を自動的に計算します

答えて

関連する問題