javascript - Submitting an HTML table row to php

Question

I need help figuring out how to submit data from a table row into PHP to be processed. I would need it to be able to submit multiple rows of data. Any ideas?

I have a table here. I want to be able to check the row and submit the data to php to process the data. It is an HTML table. I just want to know how to pass the variables to php, e.g. an array or something

Ok guys something like this:

$("submit_btn").click(function () {

       $('#diary tbody>tr input:checked').each(function() {
           $.post('process.php', 
                data: "an array",
                success: "data submitted");
       }

});

How would I get the table row data in an array to submit it? (Answer is below)

Ok Part 2:

Sending the table row data to php.

jQuery code:

    rows = JSON.stringify(rows); // submit this using $.post(...)
    alert(rows);
    $.post('classes/process.php', rows, function(data) {
      $('#results').html(data);
    })
        .error(function() { alert("error"); })
    });

PHP Code:

<?php

$rowsArray = json_decode($_POST['rows']);

echo $rowsArray;
?>

Error:

Notice: Undefined index: rows in C:...classesprocess.php on line 6

Answer 1

$('#submit_btn').click(function(){
    var rows = [];
    $('#box-table-a tbody tr input[type=checkbox]:checked').each(function(i,v){
        var tds = $(v).parents('tr').children('td');
        rows.push({
            'name': tds.eq(1).find('select').val(),
            'units': tds.eq(2).text(),
            'calories': tds.eq(3).text(),
            'sugar': tds.eq(4).text()
        });
    });
    rows = JSON.stringify(rows); // submit this using $.post(...)
    $.post('classes/process.php', {'rows': rows}, function(data){
        console.log(data);
    });
});

submit rows using a $.post() and then, in the server side, you can convert back into an array using json_decode();

Sample output:

[{"name":"Water","units":"1","calories":"2","sugar":"3"},{"name":"Food","units":"4","calories":"5","sugar":"6"}]

Demo:
http://jsfiddle.net/cp6ne/84/