使每一行都有唯一列的表
使每一行都有唯一列的表
提问于 2017-09-12 21:01:52
我有一张桌子，上面的tbody是用角重复的：
<table class="table table-bordered">
<thead data-ng-if="contracts.length!=0">
<tr>
<th>CONTRACT #</th>
<th>QUOTE PRICE</th>
<th>EFF DATE</th>
<th>END DATE</th>
<th>PROGRAM</th>
<th>DISC %</th>
<th>REBT %</th>
<th>Award 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>但这只是在增加而已。我如何添加一个表，它位于表的一部分的每一行下面？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-13 00:10:13
首先需要向现有表中添加一个新的<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"为表创建了一个空间。如果希望列与父表完全对齐，那么不要使用新表，只需将数据放在<tr>和<td>中即可。
如果嵌入表中的行数是可变的，那么在这里嵌套第二个ngRepeat来迭代附加数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46185262
复制相关文章
相似问题
腾讯云开发者
