CODEWITHSUNDEEP
javascripthtmlangularjs
Michael
Michael

Reputation: 16142

Create a table inside of tr tag?

I have an html table, <tbody> of it is generated with angular ng-repeat. Here is my html:

<tbody>
    <tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="activeRow = car.name">
        <td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
        <td>{{car.review}}</td>
        <td>{{car.rating}}</td>
        <td>{{car.fiveStarPercent}}</td>
        <td>{{car.recommended}}</td>
        <td>{{car.price}}</td>
    </tr>
    <tr ng-repeat-end ng-show="activeRow==car.name">
        <td>{{car.name}}</td>
    </tr>
</tbody>

I want to replace <td>{{car.name}}</td> with the table that will show only when you click on some row.

But if I just go and replace <td>{{car.name}}</td> on the table I need, my main table will no longer create extra rows when you click.

So, is it possible to put a table inside of a <tr> tag? If yes, then what is the right way to do it?

Upvotes: 3

Views: 85

Answers (2)

Rahul Tripathi
Rahul Tripathi

Reputation: 172628

You may try to do it like this:

<table><tr><td>...</td></tr></table>

ie, you can add a full table inside the td

JSFIDDLE DEMO

Upvotes: 0

krl
krl

Reputation: 5296

Use colspan and rowspan for this purpose https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

Upvotes: 3

Related Questions