PHP - Ajax post with values from an editable HTML table

Question

<div class="container" id="assignPackage">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
            <th>Group Name</th>
            <th style="text-align: center" valign="middle">Minmum Transaction Limit</th>
            <th style="text-align: center" valign="middle">Maximum Transaction Limit</th>
            <th style="text-align: center" valign="middle">Day Transaction Limit</th>
            <th style="text-align: center" valign="middle">No. of Transaction Per Day</th>
            </tr>
      </thead>
      <tbody data-bind="foreach: records">
          <tr>
            <td data-bind="text:packageName"></td>                
            <td> <div contenteditable></div> </td>
            <td> <div contenteditable></div> </td>
            <td> <div contenteditable></div> </td>
            <td> <div contenteditable></div> </td>
         </tr>
    </tbody>
  </table>    
<br><br>
 <button data-bind="click :$root.create" class="btn btn-success">Create Group</button>
<a href="<?php echo base_url(); ?>transaction_limit_setup" class="btn btn-success"><i class="icon-plus icon-white"></i><span>Cancel</span></a> 
</div>

Here is My html table in which the column Group Name is created with data binding and the rest of the columns are editable i.e. user will put values there. Now when I click button "Create Group" it will call a Js function named create.

<script type="text/javascript" charset="utf-8">
    var initialData = jQuery.parseJSON('<?= $packages ?>');//data for building initial table
    var vm = function() {
        var self = this;
        self.records = ko.observableArray(initialData);
        $.each(self.records(), function(i, record){
            record.packageName = record.packageName;
        })
        self.create = function()
        {

        }
    }
    ko.applyBindings(new vm());
 </script>

and inside the function I want to initiate an Ajax post to a PHP function with all the values from the table i.e. the values from column "Group name" and also the other columns which the user will give input.

How can I do that.

Answer 1

Well, break it down into parts. First, you need a loop, and that loop needs to touch each row in the table. You've already used $.each in your code, so let's re-use that:

$('#assignPackage tr').each(function(){ /* ... */ });

Now, what to do with each row? You know that the first table cell is to be treated differently than the rest; the rest have <div> wrappers around their content. The first one you can pull like this (where this is the current row in the table):

row['group_name'] = $(this).find('td:first').html();

But the others will be different, and since there are more than one of them, we've got to add another level to our loop:

var columns = $(this).find('td div')  // this is an array, too!

And you can loop through that without $.each, since having a counter is handy for knowing which column you're looking at:

for(var i = 0; i < columns; i++) {
    var value = $(columns[i]).html();

    switch(i) {
        case 0:
            row['min_trans_limit'] = value;
            break;
        case 1:
            // etc.
    }
}

So, if we package that all together into one algorithm:

var values = [];

$('#assignPackage tr').each(function(){
    var row = [],
        group = $(this).find('td:first').html(),
        columns = $(this).find('td div');

    row['group_name'] = group;

    for(var i = 0; i < columns.length; i++) {
        var value = $(columns[i]).html();

        switch(i) {
            case 0:
                row['min_trans_limit'] = value;
                break;
            case 1:
                row['max_trans_limit'] = value;
                break;
            case 2:
                row['day_trans_limit'] = value;
                break;
            case 3:
                row['trans_per_day'] = value;
                break;
        }
    }

    values.push(row);
});

You now have converted your HTML table into what is essentially a table in JavaScript (a 2-dimensional array). One dimension for rows, the other for columns. As for pushing that to the server, if you're already using AJAX, $.post can be very helpful for that. Here's a link: http://api.jquery.com/jQuery.post/ You may want to take advantage of Knockout's ko.fromJS and ko.toJS functions for mapping to/from JS objects.