如何将HTML表格数据发布为数组

Question

这是我的html表格代码，其中包含php foreach循环以填充html表格数据，我想将整个表格数据以form.serialize的数组形式通过数组发布到我的控制器中，我可以这样做吗？

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

Answer 1

您可以序列化所有输入，尝试一下

//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);                   
        },
})        

Answer 2

以这种方式尝试..将其内容放入javascript对象

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;
});

将此代码放在函数中

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

并将结果作为jquery ajax调用的data参数传递