Sum动态生成的文本框答案

【问题标题】：Sum dynamic generated text boxSum动态生成的文本框
【发布时间】：2018-08-21 08:36:00
【问题描述】：

我正在编写一个应用程序，当用户输入数量和价格时，它会给出项目总价。用户可以输入他想要的任意数量的项目。我还需要显示小计价格，这将是所有输入价格的总和。我能够计算项目价格。但是不知何故，总价没有显示出来。我尝试了 chnage 函数，该函数将从总框中获取值。然后将其汇总并显示在小计框中。我无法识别任何错误。下面是代码

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
<body>
<input type="button" value="Add Row" onclick="addRow();" />
<table id="tblGrid" style="table-layout:fixed">
            <thead>
            <tr>
                <th width="150px">Product name</th>
                <th width="150px">Package</th>
                <th width="250px">Quantity</th>
                <th width="250px">Price</th>
                <th width="250px">Total</th>
            </tr>
            </thead>
            <tbody>

            <tbody>
        </table>
Subtotal :<input type='text' id="totalPrice" name='subt' class='form-control'>      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript">

            //add a new row to the table
            function addRow()
            {
                //add a row to the rows collection and get a reference to the newly added row
                var newRow = document.all("tblGrid").insertRow();

                //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

                var oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t1' class='form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t2' class='form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t3' class=' one form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t4' class='two form-control'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t5' class='three form-control' readonly> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>";         
            }

            //deletes the specified row from the table
            function removeRow(src)
            {
                /* src refers to the input button that was clicked. 
                   to get a reference to the containing <tr> element,
                   get the parent of the parent (in this case case <tr>)
                */          
                var oRow = src.parentElement.parentElement;     

                //once the row reference is obtained, delete it passing in its rowIndex         
                document.all("tblGrid").deleteRow(oRow.rowIndex);       
            }

        $("table").on("change", "input", function () {  //use event delegation
  var tableRow = $(this).closest("tr");  //from input find row
  var one = Number(tableRow.find(".one").val());  //get first textbox
  var two = Number(tableRow.find(".two").val());  //get second textbox
  var total = one * two;  //calculate total
  tableRow.find(".three").val(total);  //set value
});

// we used jQuery 'keyup' to trigger the computation as the user type
$('.three').on("change", "input", function () {

    // initialize the sum (total price) to zero
    var sum = 0;

    // we use jQuery each() to loop through all the textbox with 'price' class
    // and compute the sum for each loop
    $('.three').each(function() {
        sum += Number($(this).val());
    });

    // set the computed value to 'totalPrice' textbox
    $('#totalPrice').val(sum);

});
</script>
</body>
</html>

请帮忙！！！！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

当用户手动更改输入值时。事件更改被调用。但是当您以编程方式更改输入值时，不会调用事件更改。所以你需要在.three val 发生变化时触发 change 事件。

您可以使用：.change() 或 .trigger('change')

这里是演示http://jsbin.com/moniwemixa/edit?html

【讨论】：

【解决方案2】：

改变这一行

$('.three').on("change", "input", function ()

到

$('table').on("change", "input", function ()

因为输入（第三类）是您附加的元素。所以，你必须通过“on”与他们的父母绑定

Demo

【讨论】：

【解决方案3】：

为所有“总计”文本框添加一个通用类。我添加了一个类total

class='total three form-control'
.three 的更改事件不是必需的。请删除它。

添加另一个功能

function UpdateTotal() {
        var sum = 0;
        $(".total").each(function () {
            sum += +$(this).val();
        });
        $('#totalPrice').val(sum);
 }

从 removeRow 函数和表更改事件中调用此函数。

//deletes the specified row from the table
function removeRow(src) {
    /* src refers to the input button that was clicked.
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case case <tr>)
    */
    var oRow = src.parentElement.parentElement;

    //once the row reference is obtained, delete it passing in its rowIndex
    document.all("tblGrid").deleteRow(oRow.rowIndex);
    UpdateTotal();
}

$("table").on("change", "input", function () {  //use event delegation
    var sum = 0;
    var tableRow = $(this).closest("tr");  //from input find row
    var one = Number(tableRow.find(".one").val());  //get first textbox
    var two = Number(tableRow.find(".two").val());  //get second textbox
    var total = one * two;  //calculate total
    tableRow.find(".three").val(total);  //set value
    UpdateTotal(); // New function
});

它对我有用。请检查。

【讨论】：