I post with Ajax 3 arrays, each one for every column. I calculate the sum in PHP, then I echo it in every .totalCol child. I want to post only one array called data, that contains the 3 columns, calculate the sum and echo back, and the same with rows.I want to make it dynamic because when I click "+" button of table It will increment rows and columns And I want to calculate it too.
This is How I calculate the columns:
HTML TABLE:
<table id="sum_table">
<tr>
<td><input value="0" class="sum1" /></td>
<td><input value="0" class="sum2"/></td>
<td><input value="0" class="sum3"/></td>
<td class="total">0</td>
</tr>
<tr>
<td><input value="0" class="sum1"/></td>
<td><input value="0" class="sum2"/></td>
<td><input value="0" class="sum3"/></td>
<td class="total">0</td>
</tr>
<tr>
<td><input value="0" class="sum1"/></td>
<td><input value="0" class="sum2"/></td>
<td><input value="0" class="sum3"/></td>
<td class="total">0</td>
</tr>
<tr class ="totalCol">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<button id="tabla">+</button>
<button id="moes">Hide/Show</button>
POST OF COLUMNS:
$(document).on('change',function(){
var col1 = [];
var col2 = [];
var col3 = [];
// collect all data from table col1
$.each($('table td input.sum1'), function(k, v){
col1.push($(v).val());
});
// collect all data from table col2
$.each($('table td input.sum2'), function(k, v){
col2.push($(v).val());
});
// collect all data from table col3
$.each($('table td input.sum3'), function(k, v){
col3.push($(v).val());
});
// send data to server
$.ajax({
url: 'suma.php',
type: 'post',
data: {'col1': col1, 'col2': col2, 'col3': col3,},
dataType: 'json',
success: function(data){
// insert your server-calculated data to dom
$('.totalCol td:nth-child(1)').text(data.SumCol1);
$('.totalCol td:nth-child(2)').text(data.SumCol2);
$('.totalCol td:nth-child(3)').text(data.SumCol3);
}
});
});
PHP CALC:
<?php
$SumCol1 = _sumUp($_POST['col1']);
$SumCol2 = _sumUp($_POST['col2']);
$SumCol3 = _sumUp($_POST['col3']);
echo json_encode(array(
"SumCol1" => $SumCol1,
"SumCol2" => $SumCol2,
"SumCol3" => $SumCol3
));
function _sumUp($data)
{
$sum = 0;
foreach($data as $k => $v)
{
$sum += $v;
}
return $sum;
}
?>
Thank You in advance!