Question

我有一个包含大量实体的表。当我点击其中一行时，我想在其下方放下另一个表格，其中包含有关该实体的详细信息。

使用Ajax加载数据，我完成了这部分。

我如何在桌子上制作桌子？

<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中的信息，例如通过班级further-information。

在桌引导程序里面的下拉表

1 个答案: