CODEWITHSUNDEEP
htmlhtml-tabledropdown
Jannik
Jannik

Reputation: 421

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="[email protected]">

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

Upvotes: 1

Views: 712

Answers (1)

Sergej
Sergej

Reputation: 1092

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="[email protected]">

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

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

Upvotes: 1

Related Questions