PHP - Ajax 发布可编辑 HTML 表中的值

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>

这是我的 html 表，其中组名称列是使用数据绑定(bind)创建的，其余列是可编辑的，即用户将在其中放置值。现在，当我单击“创建组”按钮时，它将调用名为 create 的 Js 函数。

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

在函数内部，我想使用表中的所有值(即“组名称”列以及用户将输入的其他列中的值)向 PHP 函数发起 Ajax 发布。

我怎样才能做到这一点。

Answer 1

好吧，把它分成几个部分。首先，您需要一个循环，并且该循环需要接触表中的每一行。您已经使用过$.each在您的代码中，让我们重新使用它:

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

现在，如何处理每一行？您知道第一个表格单元格的处理方式与其他单元格不同；其余的有<div>围绕其内容的包装。您可以像这样拉出第一个(其中 this 是表中的当前行):

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

但是其他的会有所不同，并且由于它们不止一个，我们必须在循环中添加另一个级别:

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

你可以在没有 $.each 的情况下循环它，因为有一个计数器可以方便地知道您正在查看哪一列:

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

所以，如果我们将它们打包成一个算法:

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

您现在已经将 HTML 表格转换为本质上 JavaScript 中的表格(二维数组)。一个维度用于行，另一个维度用于列。至于将其推送到服务器，如果您已经在使用 AJAX，$.post对此非常有帮助。这是一个链接:http://api.jquery.com/jQuery.post/您可能想利用 Knockout 的 ko.fromJS和ko.toJS用于映射到 JS 对象/从 JS 对象映射的函数。