How to post html table data as a array

Question

here is my html table code which contains php foreach loop for fillig the html table data, i want to post this whole table data to my controller as a array by form.serialize in ajax, can i do this??how??

<table class="table table-striped table-vcenter table-bordered">
                        <thead>
                        <th>Master Name</th>
                        <th>From No.</th>
                        <th>To No.</th>
                        <th>Total</th>
                        </thead>
                        <tbody>
                            <?php foreach ($master as $name) { ?>
                                <tr class="rc1_tr">
                                    <td class="td_amount"><div id="amount"><?php echo $name['amount']; ?></div></td>
                                    <td id="form_no"><div id="div_to_no"><?php echo $name['receipt_no_to'] ? $name['receipt_no_to'] : '0'; ?></div></td>
                                    <td align='center' class="qt" id="<?php echo $name['id'] ?>" style="width: 250px;"><input type="text" id="to_no" class="quantity" value="" style="text-align:center;width:180px;height:26px;margin-bottom: 2px;"/></td>
                                    <td id="td_total"><div id="total"></div></td>
                                </tr>
                            <?php } ?>
                        </tbody>
                        <tfoot>
                            <tr class="grand_total">
                                <td colspan="3">Grand Total</td>
                                <td><div id="div_grand_total"></div></td>
                            </tr>
                        </tfoot>
                    </table>

is this what you are looking for stackoverflow.com/questions/1078909/… — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jul 4, 2014 at 12:19

xecgr · Accepted Answer · 2014-07-04 12:29:27Z

0

You can serialize all inputs, try this

//dynamic query_string generation
var filters_query_string = "&" + $(".rc1_tr input").map(function (i,e) {
    return $(e).serialize()
    }).toArray().join("&")

$.ajax({url  : $("#your_form").attr('action') +filters_query_string, 
        //other ajax params
        success: function(data) {
            //do stuff
        },
        dataType: 'json' /* return type, f.e: json  */,
        error: function(error) {
           console.log(error);                   
        },
})

answered Jul 4, 2014 at 12:29

xecgr

5,2033 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Priyank Over a year ago

i don't have inputs inside table, it contains only simple text.

faby · Accepted Answer · 2014-07-04 13:45:20Z

0

try in this way.. put its content inside javascript object

var rowIndex=0;
var columnIndex=0;
var tableJson = [];
$(".table tr").each(function () {
  var row = $(this);
  $("td", row).each(function () {
    var tdElem= $(this);
    tableJson.push({row=rowIndex,column=columnIndex,value=tdElem.html()});
    columnIndex+=1;
  });
 rowIndex+=1;
});

put this code inside a function

function getJsonTable(){
   //previous code
  return JSON.stringify(tableJson);
}

and pass the result as data parameter of jquery ajax call

edited Jul 4, 2014 at 13:45

answered Jul 4, 2014 at 12:32

faby

7,6043 gold badges30 silver badges45 bronze badges

3 Comments

Priyank Over a year ago

it give tableJson is undefined and can't set property 0

faby Over a year ago

have you put this var tableJson = new Object();?

Priyank Over a year ago

yes,but you have to add,tableJson[rowIndex] = new Object();,and it works

Collectives™ on Stack Overflow

How to post html table data as a array

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related