CODEWITHSUNDEEP
htmlhtml-table
Saras Arya
Saras Arya

Reputation: 3112

Can we put any tag inside tbody of table element in HTML

I have a very peculiar use case which requires me to use two ng-repeats. One array is of dates and another contains some date in form of associated array with argument as those dates.

<tbody>
    <tr ng-repeat="date in dates">
    <!-- <tr ng-repeat="datum in data[date]"> -->
    <td> {{date}} </td>
    <td> {{datum.carName}} {{datum.regNumber}}</td>
    <td> {{datum.driverName}} </td>
    <td> {{datum.startTime}} </td>
    <td> {{datum.endTime}} </td>
    <td> {{datum.trip.sourceName}}</td>
    <td> {{datum.trip.destinationName}} </td>
    <!-- </tr> -->
    </tr>
</tbody>

Now HTML doesn't allow me to use any another tags inside tbody apart from tr and td. Also I know that we cannot have two ng-repeats inside a tag so what could be the workaround for this ? Can I insert any other tag ?

Upvotes: 0

Views: 3107

Answers (3)

charlietfl
charlietfl

Reputation: 171698

No, you can't put just any element you want (like a <div>, for example) inside <tbody>. What you can do is repeat <tbody> and then repeat <tr> within each <tbody>

<tbody  ng-repeat="date in dates">    
    <tr ng-repeat="datum in data[date]">

There are no limits on having more than one <tbody>

Upvotes: 3

codeandcloud
codeandcloud

Reputation: 55333

Another way

<table>
    <tbody>
        <tr ng-if="0" ng-repeat-start="date in dates"></tr>
        <tr ng-repeat="datum in data[date]">
            <td> {{date}} </td>
            <td> {{datum.carName}} {{datum.regNumber}}</td>
            <td> {{datum.driverName}} </td>
            <td> {{datum.startTime}} </td>
            <td> {{datum.endTime}} </td>
            <td> {{datum.trip.sourceName}}</td>
            <td> {{datum.trip.destinationName}} </td>
        </tr>
        <tr ng-if="0" ng-repeat-end></tr>
    </tbody>
</table>

This uses a combination of ng-if and ng-repeat-start / ng-repeat-end. Here ng-if="0" ensures that the element won't be rendered.

Upvotes: 1

zazvorniki
zazvorniki

Reputation: 3602

You can always other tags inside the td.

<tbody>
  <tr>
    <tr>
      <div>here</div>
      <p>there</p>
    </tr>
  </tr>
</tbody>

Upvotes: -3

Related Questions