多维阵列打印，通过单击按钮在每行上具有功能

Question

我可以创建一个名为 columns 的数组，其结构如下：

columns = [
           {column: [1,2,3,4,5,6]},
           {column: [7,8,9,10,11,12]},
           {column: [13,14,15,16,17,18]}
          ]

我使用以下代码成功打印了数组：

<table class="table">
    <tbody data-bind="foreach: columns">
        <tr data-bind="foreach: $data.column">
            <td><input type="button" class="btn btn-default" data-bind="value: $data"</td>
         </tr>
     </tbody>
 </table>

但是，我希望在每个表格行的末尾引入一个按钮，以便能够删除该行。我知道该按钮将包含一个名为 removeColumn 的数据绑定单击函数，在我的视图模型中它将是这样的：

self.removeColumn = function() {
    self.columns.remove(this);
}

我找不到在表格中正确引入此按钮的方法。其他时候每行创建 6 次，其他时候根本不出现。当我尝试显示每一列的索引时也会发生同样的事情 - 表格行，以便我可以计算出现了多少列。

https://jsfiddle.net/qmxs87k5/4/

Answer 1

您可以尝试对淘汰赛的 foreach 使用注释语法，这样您就可以在每行添加另一个 <td>：

<table class="table">
    <tbody>
    <!-- ko foreach: columns -->
        <tr>
            <!-- ko foreach: $data.column -->
            <td><input type="button" class="btn btn-default" data-bind="value: $data"</td>
            <!-- /ko -->

            <td>
                <div class="btn btn-primary" data-bind="click: $parent.deleteRow">Delete Row</div>
            </td>
         </tr>
     <!-- /ko -->
     </tbody>
 </table>