使每个其他行具有唯一列的另一个表

Question

我有一个表格，其中tbody以角度重复：

<table class="table table-bordered">
    <thead data-ng-if="contracts.length!=0">
        <tr>
            <th>CONTRACT&nbsp;#</th>
            <th>QUOTE&nbsp;PRICE</th>
            <th>EFF&nbsp;DATE</th>
            <th>END&nbsp;DATE</th>
            <th>PROGRAM</th>
            <th>DISC&nbsp;%</th>
            <th>REBT&nbsp;%</th>
            <th>Award&nbsp;Type</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-ng-repeat="(contractIndex, contract) in historyContracts track by $index">
        <tr>
            <td>
                <input bind-once class="form-control input-sm" data-ng-model="contract.CONTRACT_NUM_VAL" />
            </td>
            <td>
                <input id="targetQuote" class="form-control input-sm" data-ng-model="contract.QUOTE_PRICE" />
            </td>
            <td>
                <div class="input-group date">
                    <input id="effectiveDate" type="text" data-ng-model="contract.EFF_DT" class="form-control input-sm">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                </div>
                <script type="text/javascript">
                </script>
            </td>
            <td>
                <div class="input-group date">
                    <input id="endDate" type="text" data-ng-model="contract.END_DT" class="form-control input-sm">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                </div>
            </td>
            <td><input bind-once type="text" ng-disabled="true" class="form-control input-sm" data-ng-model="contract.GM_PROGRAM" /></td>
            <td><input type="number" class="form-control input-sm" data-ng-model="contract.DISCOUNT_PCT" /></td>
            <td><input type="number" class="form-control input-sm" data-ng-model="contract.REBATE_PCT" /></td>
            <td><input type="text" class="form-control input-sm" maxlength="1" data-ng-model="contract.AWARD_TYPE" /></td>
            <td><button type="button" class="btn btn-default" data-dismiss="modal" ng-show="$last" data-ng-click="saveHistoryContracts(historyContracts)">Update All</button>
        </tr>
    </tbody>
</table>

我需要在每个行之间添加一个新行，其中包含自己的表格，如下所示：

我尝试在td中添加一个表：

<td>
    <table>
    <tr><td>nested table</td></tr>
    <tr><td>nested table</td></tr>
    </table>
</td>

但它只是增加了它。如何添加一个表格，该表格位于表格中的每一行之下？

Answer 1

您需要先向现有表格添加新的@foreach($posts as $post) {{ $post->title }} @endforeach ：

<tr>

演示：https://jsfiddle.net/07sf5Low/1/（我刚刚复制了行来说明，而不是设置AngularJS应用程序）

我使用<tbody data-ng-repeat="(contractIndex, contract) in historyContracts track by $index"> <tr> <td> <input bind-once class="form-control input-sm" data-ng-model="contract.CONTRACT_NUM_VAL" /> </td> <td> <input id="targetQuote" class="form-control input-sm" data-ng-model="contract.QUOTE_PRICE" /> </td> <td> <div class="input-group date"> <input id="effectiveDate" type="text" data-ng-model="contract.EFF_DT" class="form-control input-sm"> <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> </div> <script type="text/javascript"> </script> </td> <td> <div class="input-group date"> <input id="endDate" type="text" data-ng-model="contract.END_DT" class="form-control input-sm"> <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> </div> </td> <td><input bind-once type="text" ng-disabled="true" class="form-control input-sm" data-ng-model="contract.GM_PROGRAM" /></td> <td><input type="number" class="form-control input-sm" data-ng-model="contract.DISCOUNT_PCT" /></td> <td><input type="number" class="form-control input-sm" data-ng-model="contract.REBATE_PCT" /></td> <td><input type="text" class="form-control input-sm" maxlength="1" data-ng-model="contract.AWARD_TYPE" /></td> <td><button type="button" class="btn btn-default" data-dismiss="modal" ng-show="$last" data-ng-click="saveHistoryContracts(historyContracts)">Update All</button> </tr> <tr> <td></td> <td colspan="2"> <table> <tr> <td>nested table</td> </tr> <tr> <td>nested table</td> </tr> </table> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> 为表创建了一个空间。如果您希望列与父表完全对齐，则不要使用新表，只需将数据放在colspan="2"和<tr>中。

如果嵌入表中的行数是可变的，那么在此处嵌套第二个<td>以迭代其他数据。