Javascript:keyup 事件的输入计算其总和

Question

我是 javascript 及其事件的新手。这是我的表格 html 代码，其中有收入标题及其各自的价格。

<table class="table table-hover table-bordered" id="incomeId">
  <thead>
    <tr>
      <th> sn </th>
      <th> Title of income </th>
      <th> Price </th>
      <th> Action </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <select name="name" id="inputID" class="form-control">
          <option value=""> -- Select One --</option>                           
        </select>
      </td>
      <td>
        <input type="text" name="name" id="income_price" class="form-control income" value="" title="" required="required">
      </td>
      <td>
        <span class="glyphicon glyphicon-trash"></span>
      </td>

    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td> Total: <div class="total" id="total"></div> </td>
      <td></td>
    </tr>
  </tfoot>
</table>

<button type="button" class="btn btn-info" id="add-new">Add New Income</button>

要在表中添加新行 JavaScript 代码是，

$('#add-new').on('click', function () {
        $("#incomeId").each(function () {

            var tds = '<tr>';

            jQuery.each($('tbody tr:last td', this), function () {
                tds += '<td>' + $(this).html() + '</td>';
            });

            tds += '</tr>';
            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });
    });

但我想在表中创建新行之前从所有价格部分获取价格并将其与总计部分中的每个部分相加。当我创建新行时，最近创建的价格应添加到之前的总价中。请帮我找出解决方案。

Answer 1

那么您有一堆动态插入的输入想要绑定(bind)到 updateTotal 事件处理程序？

最简单的选择是将事件处理程序绑定(bind)到静态包装元素。我建议使用表单元素，但由于您的示例中没有表单元素，因此表格主体可能是另一种选择。

$('table#incomeId > tbody').on('keyup', 'input', function(e){

       var total = 
            $(e.delegateTarget)
                .find('input')
            .map(function(){
                return parseFloat($(this).val()) || 0;
            })
            .get()
            .reduce(function(a,b){
                return a + b;
            });

       $('#total').text(total);


    });

$('#add-new').on('click', function() {
  $("#incomeId").each(function() {
  
   var tr = $('tbody > tr:last', this).clone();
   tr.find('input').val('');
   var sntd = tr.find('td:first');
   var sn = parseInt(sntd.text()) + 1;
   sntd.text(sn);
   
   $('tbody', this).append(tr);
   
   
   
   return;

  });
});

$('table#incomeId > tbody').on('keyup', 'input', function(e) {

  var total =
    $(e.delegateTarget)
    .find('input')
    .map(function() {
      return parseFloat($(this).val()) || 0;
    })
    .get()
    .reduce(function(a, b) {
      return a + b;
    });

  $('#total').text(total);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered" id="incomeId">
  <thead>
    <tr>
      <th>
        sn
      </th>
      <th>
        Title of income
      </th>
      <th>
        Price
      </th>
      <th>
        Action
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <select name="name" id="inputID" class="form-control">
          <option value=""> -- Select One --</option>                           
        </select>
      </td>
      <td>
        <input type="text" name="name" id="income_price" class="form-control income" value="" title="" required="required">
      </td>
      <td>
        <span class="glyphicon glyphicon-trash"></span>
      </td>

    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>Total:
        <div class="total" id="total"></div>
      </td>
      <td></td>
    </tr>
  </tfoot>
</table>

<button type="button" class="btn btn-info" id="add-new">Add New Income</button>