带有扩展表行 asp.net 的中继器

Question

我正在尝试使用带有标题的表格行以及所有这些，当用户单击任何行时，该行应该展开..

这行得通：

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

我看起来喜欢表格数据杀死扩展功能..

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

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

Answer 1

这是第二个 sn-p 行的标记，省略了标签：

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

这是一个错误的表格标记。 tr 不能有任意标签作为子标签，只有 td 在那里有效。看起来这种混合破坏了浏览器处理此表的方式。

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

1. 摆脱表格并呈现 div 和 h1 中的所有内容。需要一些努力才能正确对齐，但在标记方面不会限制表格。

2. 使用 colspans 和 rowspans，或者根据需要添加交替行。

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