Question

我正在编写一个应用程序，当用户输入数量和价格时，它会给出项目总价。用户可以输入他想要的任意数量的项目。此外，我需要显示小计价格，它将是所有投入价格的总和。我能够计算物品价格。但不知何故总价格没有显示出来。我尝试了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>

请帮助!!!!

Answer 1

当用户手动更改输入值时。事件变化被称为。但是当您以编程方式更改输入值时，将不会调用事件更改。因此，当.three val被更改时，您需要触发更改事件。

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

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

Answer 2

更改此行

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

到

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

因为输入（第三类）是您追加的元素。因此，您必须通过＆＃34; on＆＃34;

与父母绑定

Demo

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

它对我有用。请检查。

Sum动态生成的文本框

3 个答案: