table bootstrap 内的下拉菜单 table

Question

我有一个 table，里面有很多实体。当我点击其中一行时，我想在它下面有另一个 table 下拉菜单，其中包含关于实体。

加载数据将用 Ajax 完成，我已涵盖该部分。

我将如何在 table 中制作 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 1

你可以把它放在自己的tr里，比如：

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

然后切换此 tr 中的信息，例如通过 class further-information.

table bootstrap 内的下拉菜单 table

Dropdown table inside of a table bootstrap

html

html-table

dropdown