简体   繁体   English

从表输入中获取总数作为jquery中的总计

[英]Get total from table input as grand total in jquery

I have a table that makes automatically 2 calculations: 我有一个表自动进行2次计算:

  1. Calculation of numbers of days after the selection of date started and date end from two input date field with calendar, result is stored is field (days) 从日历两个输入日期字段中选择开始日期和日期结束后的天数计算,结果存储为字段(天)
  2. Multiplication of 3 fields (horse* days* price), result is stored ind field (total). 3个字段的乘法(马*天*价格),结果存储在ind字段(总计)。 There is a button that when we click on it a new row is added. 有一个按钮,当我们点击它时,会添加一个新行。

How can i calculate the grand total of numbers of days and the grand total of the total to display the results in a row below the table ? 如何计算总天数总计的总数,以便在表格下方连续显示结果 And i want to grasp the input values in post so that i store them in table using php. 我想掌握post中的输入值,以便我使用php将它们存储在表中。

1- table 1-表

 <table class='table'>
<tr>
  <th class='th'>Nbr/horses</th>
  <th class='th'>dateStart</th>
  <th class='th'>dateEnd</th>
  <th class='th'>Nbr/days</th>
  <th class='th'>Price</th>
  <th class='th'>Total</th>
</tr>
<tr>
  <td class='td'><input type='number' min='1' name='horse' class='horse'/></td>
  <td class='td'><input type='date' name='dateStart' class='datepicker dateStart'/></td>
  <td class='td'><input type='date' name='dateEnd' class='datepicker dateEnd'/></td>
  <td class='td days'><input type='text' name='days'/>0</td>
  <td class='td'><input type='number' min='1' name='price' class='price'/></td>
  <td class='td total'> <input type='text' name='total1'/></td>
  <td class='td'><button type='button' class='button'>+</button></td>
</tr>

2- functions 2-功能

 let update = function(lineNode){
let dateStart = $(lineNode).find('.dateStart').datepicker('getDate');
let dateEnd = $(lineNode).find('.dateEnd').datepicker('getDate');
let days = Math.floor( (dateEnd - dateStart) / (3600*24*1000) );
days = days >= 0 ? days : 0;

$( lineNode ).find('.days').text( days );

let horse = parseInt( $(lineNode).find('.horse').val() );
let price = parseInt( $(lineNode).find('.price').val() );
let total = horse * days * price;

$( lineNode ).find('.total').text( total+' €' );
 }

  // add line after click
  let addRow = function(lineNode){
   let clone = lineNode.cloneNode(true);
   $(clone).insertAfter(lineNode);
   reloadEffects();
   }

  let reloadEffects = function(){
  $('.hasDatepicker').removeClass('hasDatepicker').attr('id', '');

$('.datepicker').datepicker();
$('.horse, .price, .datepicker').change( e => {
  update(e.target.parentNode.parentNode);
});
$('.button').click( e => {
  addRow(e.target.parentNode.parentNode);
});

}; };

// Start

 reloadEffects();

for the total 总计

var sum = 0;
$(".total").each(function(index,value){
sum = sum + parseFloat($(this).find('input[name="total1"]').val());
});
//Sum in sum variable 
console.log(sum);

Apply the same for days ! 几天都适用!

Working Fiddle : Fiddle 工作小提琴: 小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM