AJAX post to PHP, Calculate sum and return

Question

I got a table in html, I send a POST in ajax with 2 arrays, one called rowValues that contains 3 arrays, one for every row. And another array called columnValues that contains 3 arrays one for every column.

I POST it ok, but the problem is : How can I calculate in PHP the sum of every row and every column, and do an echo to success function showing the result in class "totalCol" and "total" of every column and row?

This is my code:

<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>


<script>

  $(document).on('change',function(){

     var columnValues={}, rowValues={};

     $("#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 CODE:

foreach ($_POST['rows'] as $rowNumber => $values){
    // $values is an array with all the values in the row
    echo "Hola";
}
foreach ($_POST['columns'] as $columnNumber => $values){
    // $values is an array with all the values in the column
}

Thank You in Advance Guys!

Answer 1

The PHP code:

$result = array(
    'rows' => array(), 
    'columns' => array()
);

foreach ($_POST['rows'] as $rowNumber => $values){
    // $values is an array with all the values in the row
    $result['rows'][$rowNumber] = array_sum($values);
}
foreach ($_POST['columns'] as $columnNumber => $values){
    // $values is an array with all the values in the column
    $result['columns'][$columnNumber] = array_sum($values);
}

// output the result as json
echo json_encode($result);

And the Javascript success callback:

function(data){
    var rows = data.rows,
        columns = data.columns;

    // insert your server-calculated data to dom   
    $("td.total").each(function(rowIndex){
        $(this).text(rows[rowIndex+1]);
    });

    $("tr.totalCol td").each(function(columnIndex){
        $(this).text(columns[columnIndex+1]);
    });
}