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表，其中使用数据绑定创建列组名，其余列是可编辑的，即用户将值放在那里。现在，当我点击按钮＆＃34;创建组＆＃34;它将调用名为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>

并且在函数内部我希望使用表中的所有值（即列＆＃34;组名＆＃34;中的值）向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对象映射。

PHP - 带有来自可编辑HTML表的值的Ajax帖子

1 个答案: