javascript - 使用 jQuery 计算两个动态创建的文本框的总和

Question

HTML：

<table id="tbl" border="1">
  <tr>
    <th>Name</th>
    <th>Mark1</th>
    <th>Mark2</th>
    <th>Total</th>
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text" class="cell"></td>
    <td><input type="text" class="cell"></td>
    <td><b><span id="total_sum_value"></span></b></td>
    <td><b><span id="total_sum_value1"></span></b></td>
    <th><input class="add-row" data-id="1" type="button" value="+"></th>
  </tr>
</table>

JavaScript：

$(document).ready(function(){
  var i = $(".add-row").data("id");

  $(".add-row").click(function(){
    $('#tbl').append('<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>');
    var two = $("input").addClass("cell"+i);

    $("#tbl").on('input','.cell'+i,function(){
      var sum1 = 0;

      $(".cell"+i).each(function() {
        var get_val = $(this).val();
        sum1 += parseFloat(get_val);
      });

      $("#total_sum_value1").html(sum1);
    });

    i++;
  });

  $("#tbl").on('input','.cell',function(){
    var sum = 0;

    $('.cell').each(function(){
      var get_val = $(this).val();
      sum += parseFloat(get_val);
    });

    $("#total_sum_value").html(sum);
  });
});

当您单击加号按钮时，它会生成三个文本框。我想计算这些文本框的总和并将其打印在一个跨度中。

这是我的代码的 CodePen：https ://codepen.io/anon/pen/XBqKVZ?editors=1010

标签： javascriptjquery

Answer 1

你能试试这样吗：

 $('.cell').on('change', function(){
  var sum = 0;
  var data ={
  }

  $('.cell').each(function(index, item){
    var val = $(item).val();
    var get_val = $(this).val();
      sum += Number(get_val);
      console.log(sum);
  });
  $("#total_sum_value").html(sum);
});

网址：jsfiddle