[英]JQuery Array Post to PHP
我用Ajax 3個數組發布,每列每個數組。 我用PHP計算總和,然后在每個.totalCol子代中回顯總和。 我只想發布一個名為data的數組,該數組包含3列,計算總和並回顯,並且與rows.I相同,我想使其動態化,因為當我單擊表的“ +”按鈕時,它將增加行和專欄我也想計算它。
這是我計算列的方式:
HTML表格:
<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>
柱后:
$(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;
}
?>
先感謝您!
$(document).on('change',function(){
var columnValues={}, rowValues={};
// columnValues will look like this:
// columnValues={columnNumber:[value, value, value]}
// rowValues the same:
// rowValues={rowNumber:[value, value, value]}
// First, iterate through the rows
$("#sum_table tr").each(function(rowIndex){
$("td input", $(this)).each(function(colIndex){
var value=$(this).val();
// indexes need +1 to get the row number, because
// the indexes are 0-based.
if (undefined===columnValues[colIndex+1]){
columnValues[colIndex+1]=[];
}
if (undefined===rowValues[rowIndex+1]){
rowValues[rowIndex+1]=[];
}
rowValues[rowIndex+1].push(value);
columnValues[colIndex+1].push(value);
});
});
// send data to server
$.ajax({
url: 'suma.php',
type: 'post',
data: {rows:rowValues, columns:columnValues},
dataType: 'json',
success: function(data){
// insert your server-calculated data to dom
}
});
});
在PHP中,您可以這樣訪問它們:
<?php
foreach ($_POST['rows'] as $rowNumber => $values){
// $values is an array with all the values in the row
}
foreach ($_POST['columns'] as $columnNumber => $values){
// $values is an array with all the values in the column
}
?>
關於在數組$.ajax
:通過發送對象$.ajax
成為PHP的數組。 不管水平。
$.ajax({
url: 'arraytest.php',
data: {
hello: {
foo: 'bar'
},
world: {
life: 'isgreat'
}
}
});
arraytest.php:
<?php
echo $_POST['hello']['foo']; // outputs bar
echo $_POST['world']['life']; // outputs isgreat
?>
如果您要使用jQuery / javascript計算列,
$(document).on('change',function(){
var col1sum = 0;
var col2sum = 0;
var col3sum = 0;
// collect all data from table col1
$.each($('table td input.sum1'), function(k, v){
col1sum+=parseInt($(v).val());
});
// collect all data from table col2
$.each($('table td input.sum2'), function(k, v){
col2sum+=parseInt($(v).val());
});
// collect all data from table col3
$.each($('table td input.sum3'), function(k, v){
col3sum+=parseInt($(v).val());
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.