css - 每隔一行制作另一个具有唯一列的表

Question

我有一张表，其中 tbody 以 Angular 重复:

<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

您需要添加一个新的 <tr>首先到现有表:

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

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

我用过 colspan="2"为 table 创造空间。如果您希望列与父表完全对齐，则不要使用新表，只需将数据放在 <tr> 中即可。 s 和 <td>秒。

如果嵌入表中的行数是可变的，则嵌套第二个 ngRepeat在这里迭代额外的数据。