CODEWITHSUNDEEP
cssangularjshtml
David Tunnell
David Tunnell

Reputation: 7542

Making every other row another table with unique columns

I have a table where the tbody is being repeated with 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>

enter image description here

I need to add a new row between each of these rows with its own table inside something like this:

enter image description here

I tried adding a table in the td:

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

But it is just adding to it. How can I add a table that goes below each line that is part of the table?

Upvotes: 0

Views: 26

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

You need to add a new <tr> to the existing table first:

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

Demo: https://jsfiddle.net/07sf5Low/1/ (I've just duplicated the rows to illustrate, rather than set up an AngularJS app)

I've used colspan="2" to create a space for the table. If you want the columns to line up exactly with the parent table then don't use a new table, just place the data in <tr>s and <td>s.

If the number of rows in the embedded table is variable then nest a second ngRepeat here to iterate over the additional data.

Upvotes: 1

Related Questions