我的 DataGrid 的 JQuery 数学运算

Question

我有以下数据网格：

$('.dateP').datetimepicker();

$('.dupli').on( 'click', function(e){
  var dup = $('.cpy').first().clone();
  $('.table').append( dup );
  $('.dateP').datetimepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>


<p>Price per Km: 0,36</p>
<table class="table table-striped">
    <tr>
        <th>Km Nr:</th>
        <th>Date:</th>
        <td><button type="submit" class="btn btn-default dupli">+</button></td>
    </tr>
    <tr class="cpy">
        <td>
            <input type="text" class="form-control" id="e1">
        </td>
        <td>
          <div class='input-group dateP'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
          </div>
        </td>
    </tr>
</table>


<p>Total expenses: (sum of row values)</p>

我想在 jQuery 中使用一种方法来计算行数（由用户创建），然后对每一行进行乘法运算（nr Km * Price per KM）并给出最终值，即总和所有行的值。

非常感谢。

Answer 1

看看我为你制作的这个小提琴：https://jsfiddle.net/kks3bL06/

我在公里输入中添加了一个类。在所有公里字段上使用 foreach，添加总和并将其写入跨度。

$('.dateP').datetimepicker();

$('.dupli').on( 'click', function(e){
  var dup = $('.cpy').first().clone();
  $('.table').append( dup );
  $('.dateP').datetimepicker();
});


$('.kilometer').change(function() {
var total = 0;
	$('.kilometer').each(function(index,obj){
          total += $(obj).val() * 0.36;
	});
	$('.total').html(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>


<p>Price per Km: 0,36</p>
<table class="table table-striped">
    <tr>
        <th>Km Nr:</th>
        <th>Date:</th>
        <td><button type="submit" class="btn btn-default dupli">+</button></td>
    </tr>
    <tr class="cpy">
        <td>
            <input type="text" class="form-control kilometer" id="e1">
        </td>
        <td>
          <div class='input-group dateP'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
          </div>
        </td>
    </tr>
</table>
<div>
Total expeses: 
<span class="total"></span>
</div>

Answer 2

我为你做了更新，看看是否满足你的需要，

干杯

更新：雨果，你要求很高。我几乎在这里开发了完整的网络应用程序，你甚至没有给我买啤酒 :)

var frmt = {format: 'DD/MM/YYYY', viewMode: 'days'};
$('.dateP').datetimepicker( frmt );
// duplicate the row
$('.dupli').on( 'click', function(e){
  if( $('.cpy').last().find('input').first().val() != ''
    && $('.cpy').last().find('input').last().val() != '' ){    
      var dup = $('.cpy').first().clone();
      $('.table').append( dup );
      $('.dateP').datetimepicker( frmt );
      calc(); // on creation of new row do the calc
  }
});
// remove the row
$(document).on( 'click', '.remove', function(el){ 
  if( $('.cpy').length > 1 ){
    $(this).parent().parent().remove(); calc();
  }
});
// function for calc
function calc(){
  var kp = $('.price').val(); // price
  var sum = 0;
  $('.km').each( function(ix){
    sum += $(this).val() * kp;
  });
  $('.fin').val( sum );
}
// on input update the total
$(document).on( 'change input', '.km', calc );
$('.price').on( 'change input', calc );

.remove{
  cursor:pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>


<div class="form-inline col-md-6">
  <div class="form-group">
  Price per Km: <input type='number' class="form-control price" value="0.36" step="0.01" min="0.2" max="5" /></div>
</div>
<table class="table table-striped">
    <tr>
        <th>Km Nr:</th>
        <th>Date:</th>
        <td><button type="submit" class="btn btn-default dupli">+</button></td>
    </tr>
    <tr class="cpy">
        <td>
            <input type="number" class="form-control km" >
        </td>
        <td>
          <div class='input-group dateP'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
          </div>
        </td>
        <td>
          <i class="fa fa-trash remove" aria-hidden="true"></i>
        </td>
    </tr>
</table>

<p class="form-inline">Total expenses: <input type='number' class="form-control fin" /></p>