Question

我正在使用此代码这是html表单，我需要javascript * rate = amount

的javascript onblur计算

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

这是我用于添加输入字段的Javascript代码

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

我还需要自动计算总金额。我知道它是通过使用输入字段id完成的，但这里的问题是我不知道如何在我点击添加产品时添加不同的输入字段ID，这个相同的ID出现在下一个输入字段上，那么什么是最佳解决方案。

Answer 1

尝试使用此小提琴动态添加元素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

因为在您的代码中，您只使用JavaScript。这是JavaScript的尝试。你不需要只有ID属性来计算总金额，你可以给你的金额元素一个金额，并用它来得到所有具有这个类的元素的总和。

＆＃13;

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

＆＃13;

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

＆＃13;

j字段计算多个字段

2 个答案: