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

所以你有一堆动态插入的输入要绑定到updateTotal事件处理程序？

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

$('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>

Javascript：keyup事件的输入计算它们的总和

1 个答案: