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>

这是我的HTML表格，我通过Javascript绑定隐藏的id字段和组名字段，其他字段是可编辑的，即用户将提供输入。现在我想保持表格单元格的值以启动ajax帖子。为此我所做的就是以下内容。

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

在self.create函数中我已经获取了表的所有值，但我想要的是将表的每一行的值放入不同的数组中。根据我的要求，我创建了表，它不会超过四行，至少有一行但不超过四行，我希望每行的值分为四个不同的数组，如ownAccount [] eblAccount [] otherBank []和billpay []如果表生成2行，那么将创建两个数组，packageId是固定的我的意思是假设一个场景，生成3行，然后对于packageId为1的行，该行将进入ownAccount []和packageId为2的行，该行将进入eblAccount []等等。

我该怎么做......

Answer 1

好的，我已经快速整理了一些东西。看看是否有效。

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

假设您的HTML如下所示：

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

演示@ JSFiddle

HTML表的每一行都放入不同的数组中

1 个答案: