Each Row of an HTML table into different arrays

Question

<div class="container" id="assignPackage">
    <table class="table table-striped table-bordered">
    <thead>
        <tr>
        <th hidden >ID</th>
        <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  hidden data-bind="text:packageId"></td>
        <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>

This is my HTML table and I am binding the hidden id field and Group name field through Javascript and the other fields are editable i.e. user will give input. Now I want to hold the values of table cells to initiate an ajax post. For that what I did is the following.

<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.packageId = record.packageId;
        record.packageName = record.packageName;
    })  
    self.create = function()
    {
        var ownAccount = [];
        var eblAccount = [];
        var otherBank = [];
        var billsPay = [];

        $("#assignPackage tr").each(function(){
            var tableData = $(this).find('td');
            if (tableData.length > 0) {
                tableData.each(function(){
                    ownAccount.push($(this).text());    
                });
            }
        });
        console.log(ownAccount);
     }
 }
 ko.applyBindings(new vm());
</script>

inside the self.create function I have taken all the values of the table but what I want is to take the values of each row of the table into different arrays. According to my requirement I have created The table and It will not be of more then four rows and at least one but not more then four and I want the values of each row into four different arrays like ownAccount[] eblAccount[] otherBank[] and billspay[] and if the table is generated with 2 rows then there will be created two arrays and packageId are fixed I mean suppose a scenario that the table is generated with 3 rows then for the row where packageId is 1 that row will be into ownAccount[] and for the row where packageId is 2 that row will be into eblAccount[] and so on..

How Can I do that....

Answer 1

Ok, I have put together something quickly. See if that works.

$(function() {
  var ownAccount = [];
  var eblAccount = [];
  var otherBank = [];
  var billsPay = [];
  var obj = {
    "1": ownAccount,
    "2": eblAccount,
    "3": otherBank,
    "4": billsPay
  };
  $("#assignPackage tr").each(function(){
    var tableData = $(this).find('td');
    var firstCellVal = $.trim(tableData.eq(0).text());
    if (tableData.length > 0) {
        tableData.each(function(){
            obj[firstCellVal].push($(this).html());
        });
    }
  });
  console.log(ownAccount);
  console.log(eblAccount);
});

Assuming your HTML looks like below:

<div class="container" id="assignPackage">
<table class="table table-striped table-bordered">
<thead>
    <tr>
    <th hidden >ID</th>
    <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  hidden data-bind="text:packageId">1</td>
    <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>
    <tr>
    <td  hidden data-bind="text:packageId">2</td>
    <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>

Demo@JSFiddle