javascript Berechnung mehrerer Felder Felder

Question

ich diesen Code verwenden dieses HTML-Formular ist, wo ich die JavaScript-onblur Berechnung der Menge benötigen * Rate = Menge

<div> 
    <p> 
     <input type="button" value="Add Product" onClick="addRow('dataTable')" /> 
     <input type="button" value="Remove Product" onClick="deleteRow('dataTable')" /> 
    </p> 
    <table style="width: 100%;" id="dataTable" class="responstable" border="1"> 
     <tbody> 
      <tr> 
       <p> 
       <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
       <td><input type="text" name="prod" maxlength="100" placeholder="Product *" required></td> 
       <td> 
        <input type="number" name="qty[]]" maxlength="10" placeholder="QUANTITY *" required> 
       </td> 
       <td> 
        <input type="number" step="0.01" name="rate[]" maxlength="10" placeholder="RATE *" required> 
       </td> 
       <td> 
        <input type="number" step="0.01" name="amt[]" placeholder="AMOUNT *" required> 
       </td> 
       </p> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Und das ist Javascript-Code i Eingabefelder hinzufügen, indem ich für

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 25){       // limit the user from creating fields more than your limits 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     } 
    }else{ 
     alert("Maximum Limit is 25."); 

    } 
} 

function deleteRow(tableID) { 
    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) { 
      if(rowCount <= 1) {       // limit the user from removing all the fields 
       alert("Cannot Remove all the Products."); 
       break; 
      } 
      table.deleteRow(i); 
      rowCount--; 
      i--; 
     } 
    } 
} 

Ich brauche auch automatische Berechnung der Gesamtmenge. Ich weiß, dass es getan wird, indem ich Eingabefeld ID verwende, aber hier ist das Problem, ich weiß nicht, wie man verschiedene Eingabefeld ID hinzufügen, wenn ich auf Produkt hinzufügen hier die gleiche ID kommt auf nächsten Eingabefeld so was ist die beste Lösung dafür .

Answer 1

diese Geige für dynamische Elemente hinzugefügt Versuchen jsfiddle.net/bharatsing/yv9op3ck/2/

HTML:

<div> 
<p> 
<input type="button" value="Add Product" id="btnAddProduct" /> 
<input type="button" value="Remove Product" id="btnRemoveProduct" /> 
<label>Total Amount:</label><label id="lblTotal">0</label> 
</p> 
<table style="width: 100%;" id="dataTable" class="responstable" border="1"> 
<tbody> 
<tr> 
<p> 
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
<td><input type="text" name="prod" maxlength="100" placeholder="Product *" required></td> 
<td> 
<input type="number" name="qty[]" maxlength="10" placeholder="QUANTITY *" required> 
</td> 
<td> 
<input type="number" step="0.01" name="rate[]" maxlength="10" placeholder="RATE *" required>  
</td> 
<td> 
<input type="number" step="0.01" name="amt[]" placeholder="AMOUNT *" required>  
</td> 
</p> 
</tr> 
</tbody> 
</table> 
</div> 

Javascript/jQuery:

$("#btnAddProduct").click(function(){ 
    addRow('dataTable'); 
}); 

$("#btnRemoveProduct").click(function(){ 
    deleteRow('dataTable'); 
}); 

function CalculateAll(){ 
    $('input[name="rate[]"]').each(function(){ 
     CalculateAmount(this); 
    }); 

    var total=0; 
     $('input[name="amt[]"]').each(function(){ 
      total+= parseFloat($(this).val()); 
    }); 
    $("#lblTotal").html(total); 
} 

$(document).on("blur",'input[name="qty[]"]',function(){ 
    CalculateAmount(this); 
}); 

$(document).on("blur",'input[name="rate[]"]',function(){ 
    CalculateAmount(this); 
}); 

var totalAll=0; 
function CalculateAmount(ctl){ 
    var tr=$(ctl).parents("tr:eq(0)"); 
    var qty=parseFloat($(tr).find('input[name="qty[]"]').val()); 
    var rate=parseFloat($(tr).find('input[name="rate[]"]').val()); 
    var amount=qty*rate; 
    $(tr).find('input[name="amt[]"]').val(amount); 

    if(!isNaN(amount)){ 
    totalAll= totalAll + amount; 
    $("#lblTotal").html(totalAll); 
    } 
} 

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 25){       // limit the user from creating fields more than your limits 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     } 
    }else{ 
     alert("Maximum Limit is 25."); 

    } 
} 

function deleteRow(tableID) { 
    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) { 
      if(rowCount <= 1) {       // limit the user from removing all the fields 
       alert("Cannot Remove all the Products."); 
       break; 
      } 
      table.deleteRow(i); 
      rowCount--; 
      i--; 
     } 
    } 

    CalculateAll(); 
} 

Answer 2

Da in Ihrem Code Sie nur mit Hilfe von JavaScript. Hier ist ein Versuch mit JavaScript. Sie brauchen kein ID-Attribut, um nur den Gesamtbetrag zu berechnen, Sie können Ihrem Betragselement einen Klassenbetrag geben und es verwenden, um die Summe aller Elemente mit dieser Klasse zu erhalten.

function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    if(rowCount < 25){       // limit the user from creating fields more than your limits 
 
     var row = table.insertRow(rowCount); 
 
     var colCount = table.rows[0].cells.length; 
 
     for(var i=0; i<colCount; i++) { 
 
      var newcell = row.insertCell(i); 
 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
     } 
 
    }else{ 
 
     alert("Maximum Limit is 25."); 
 

 
    } 
 
} 
 

 
function deleteRow(tableID) { 
 
    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) { 
 
      if(rowCount <= 1) {       // limit the user from removing all the fields 
 
       alert("Cannot Remove all the Products."); 
 
       break; 
 
      } 
 
      table.deleteRow(i); 
 
      rowCount--; 
 
      i--; 
 
     } 
 
    } 
 
} 
 

 
function amount(event) 
 
{ 
 
    
 
var rate =parseInt(event.target.value, 10); 
 
var qty = parseInt(event.target.parentElement.previousElementSibling.querySelector("input").value, 10); 
 
    
 

 
event.target.parentElement.nextElementSibling.querySelector("input").value = rate * qty; 
 
    
 
} 
 

 
function calculate() 
 
{ 
 
    var total = 0; 
 
    document.querySelectorAll(".amount").forEach(function(elem) 
 
    { 
 
    total = total + parseInt(elem.value,10); 
 
    }); 
 
    
 
alert(total); 
 
}

<div> 
 
<p> 
 
<input type="button" value="Add Product" onClick="addRow('dataTable')" /> 
 
<input type="button" value="Remove Product"onClick="deleteRow('dataTable')" /> 
 
</p> 
 
<table style="width: 100%;" id="dataTable" class="responstable" border="1"> 
 
<tbody> 
 
<tr> 
 
<p> 
 
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td> 
 
<td><input type="text" name="prod" maxlength="100" placeholder="Product *" required></td> 
 
<td> 
 
<input type="number" name="qty[]]" maxlength="10" placeholder="QUANTITY *" required> 
 
</td> 
 
<td> 
 
<input type="number" step="0.01" onBlur="amount(event)" name="rate[]" maxlength="10" placeholder="RATE *" required>  
 
</td> 
 
<td> 
 
<input type="number" step="0.01" class ="amount" name="amt[]" placeholder="AMOUNT *" required>  
 
</td> 
 
</p> 
 
</tr> 
 
</tbody> 
 
</table> 
 
    
 
<button onClick="calculate()">Total</button> 
 
</div>