Jannik Jannik - 17 days ago 5
HTML Question

Dropdown table inside of a table bootstrap

I have a table with a lot of entities in. When I click on one of the rows, I'd like to have another table drop down below it, with details about the entity.

Loading data will be done with Ajax, and I got that part covered.

How will I approach making a table in a table?

<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Status</th>
<th>Contact Person</th>
<th>Phone</th>
<th>Email</th>
<th>Follow Up</th>
<th>Responsible</th>
</tr>
</thead>
<tbody>
@foreach (var partner in Model)
{
<tr>
<td id="@partner.Partner.Id" onclick="LoadPartnerData(@partner.Partner.Id)"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
<td>@partner.Partner.Name</td>
<td>@partner.Partner.Status</td>
<td>@partner.Partner.PrimaryContactPerson</td>
<td>@partner.Partner.PrimaryContactPhone</td>
<td>@partner.Partner.PrimaryContactEmail</td>
<td>@partner.Partner.FollowUp.ToStandardDateString()</td>
<td>@partner.Partner.ResponsiblePerson</td>
</tr>
<table class="table table-striped hidden">
<thead>
<tr>
<th></th>
<th>Report Id</th>
<th>Payment Date</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Download</th>
</tr>
</thead>
<tbody id="table_@partner.Partner.Id">

</tbody>
</table>
}
</tbody>
</table>

Answer

You can put it in an own tr, like:

<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Status</th>
            <th>Contact Person</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Follow Up</th>
            <th>Responsible</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var partner in Model)
        {
            <tr>
                <td id="@partner.Partner.Id" onclick="LoadPartnerData(@partner.Partner.Id)"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
                <td>@partner.Partner.Name</td>
                <td>@partner.Partner.Status</td>
                <td>@partner.Partner.PrimaryContactPerson</td>
                <td>@partner.Partner.PrimaryContactPhone</td>
                <td>@partner.Partner.PrimaryContactEmail</td>
                <td>@partner.Partner.FollowUp.ToStandardDateString()</td>
                <td>@partner.Partner.ResponsiblePerson</td>
            </tr>
            <tr>
                <td colspan="8" class="further-information">
                    <table class="table table-striped hidden">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Report Id</th>
                                <th>Payment Date</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th>Download</th>
                            </tr>
                        </thead>
                        <tbody id="table_@partner.Partner.Id">

                        </tbody>
                    </table>
                </td>
            </tr>
        }
    </tbody>
</table>

And then toggle the information in this tr e.g. by a class further-information.

Comments