中继器在 table 行 asp.net 上展开

Question

我正在尝试将 table 行与 header 以及所有这些一起使用，当用户单击任何行时，该行应该展开..

这个有效：

<asp:Repeater runat="server" ID="repeaterShowCases">
            <HeaderTemplate>
                <table class="table table-responsive">
                    <tr>
                        <th>Id</th>
                        <th>Date</th>
                        <th>Title</th>
                        <th>Assigned User</th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <h1 class="click">
                            <asp:Label runat="server" ID="LabelId" Text='<%# DataBinder.Eval(Container.DataItem,"id").ToString() %>'></asp:Label>

                            <asp:Label runat="server" ID="lblCreatedDate" Text='<%# DataBinder.Eval(Container.DataItem,"CreatedDate").ToString() %>'></asp:Label>
                        </h1>

                        <div class="expand">
                            <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Title").ToString() %>'></asp:Label>
                            <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"AssignedToUser").ToString() %>'></asp:Label>
                        </div>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>

但是这个剂量：

    <asp:Repeater runat="server" ID="repeaterShowCases">
                <HeaderTemplate>
                    <table class="table table-responsive">
                        <tr>
                            <th>Id</th>
                            <th>Date</th>
                            <th>Title</th>
                            <th>Assigned User</th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                        <tr>
                    <h1 class="click">
                        <td>
                            <asp:Label runat="server" ID="LabelId" Text='<%# DataBinder.Eval(Container.DataItem,"id").ToString() %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label runat="server" ID="lblCreatedDate" Text='<%# DataBinder.Eval(Container.DataItem,"CreatedDate").ToString() %>'></asp:Label>
                        </td>
                    </h1>

                    <div class="expand">
                        <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Title").ToString() %>'></asp:Label>
                        <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"AssignedToUser").ToString() %>'></asp:Label>
                    </div>
                </tr>               
 </ItemTemplate>
            </asp:Repeater>

我看起来像 table 数据杀死了扩展功能..

因为我希望它看起来像 table 并且要获取有关特定行的更多信息，用户可以单击它并且该行会随着信息展开..

我知道我还没有所有 header 的数据，但这就是我现在正在测试的内容。

Answer 1

这是来自第二个代码段的行的标记，其中省略了标签：

<tr>
    <h1>
        <td></td>
        <td></td>
    </h1>
    <div></div>
</tr>

这是 table 的错误标记。 tr 不能像 children 一样有任意标签，只有 td 在那里有效。看起来这种混合打破了浏览器处理这个 table.

的方式

然而，您的第一次尝试是一个有效的标记，因此您应该考虑采用这种方法。或者，如果出于某种原因它对您不起作用，您的选择是：

摆脱 table 并渲染 div 和 h1 中的所有内容。将需要一些努力才能正确对齐，但在标记方面不会有 tables 的限制。
使用 colspans 和 rowspans，或者根据需要添加交替行。

此外，您不需要页脚模板来关闭吗</table>？

中继器在 table 行 asp.net 上展开

Repeater with expand on table rows asp.net

asp.net

repeater