在 ASPX Repeater 中制作斑马纹

Question

我的网页中有一个转发器，我想更改背景颜色。第一个是蓝色，第二个是黄色，然后是蓝色等等。我有下面的 table 但不知道如何在中继器上实现 javascript 或 css。有人可以帮忙吗？

            <asp:Repeater ID="cevapgoruntuleyici" runat="server"
                OnItemDataBound="cevapgoruntuleyici_ItemDataBound">
                <ItemTemplate>
                    <table width="693" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
                        <tr>
                            <td colspan="2" class="style2">
                                <asp:Label ID="lblcevapno" runat="server"></asp:Label><br />
                                <br />
                                <asp:Label ID="lblcevapdetay" runat="server"></asp:Label></td>
                        </tr>
                        <tr>
                            <td width="344">
                                <asp:Label ID="lblcevaplayan" runat="server"></asp:Label>
                            </td>
                            <td width="343" class="style3">
                                <asp:Label ID="lblcevaptarih" runat="server"></asp:Label>
                            </td>
                            <tr>
                                <td>
                                    <asp:Label ID="CevapEk" Visible="false" runat="server" />
                                    <asp:Button ID="CevapEkIndir" Visible="false" runat="server" OnClick="CevapEkIndir_Click" />

                                </td>

                            </tr>
                        </tr>
                    </table>
                    <br />
                </ItemTemplate>
            </asp:Repeater>

Answer 1

您当前的结构将创建多个 table，即对于您 collection 中的每个项目，将呈现一个单独的 table，这是错误的。您只需要一个包含多行的 table，以便在 HeaderTemplate 和 FooterTemplate 中定义 table 来解决这个问题。如下图：-

<HeaderTemplate>
    <table width="693" border="1" cellpadding="0" cellspacing="0" 
           bordercolor="#CCCCCC">
</HeaderTemplate>
<ItemTemplate>
    <tr>
        <td colspan="2" class="style2">
              <asp:Label ID="lblcevapno" runat="server"></asp:Label><br />
              <br />
              <asp:Label ID="lblcevapdetay" runat="server"></asp:Label></td>
    </tr>
     ....
<FooterTemplate>
     </table>
</FooterTemplate>

这将只呈现一个 table，其行数与 collection 中的行数一样多。接下来只需在 table 中找到 odd 和 even 行，然后像这样设置 CSS 颜色：-

 <style>
    tr:nth-child(even) {
        background-color: red;
    }

    tr:nth-child(odd) {
        background-color: blue;
    }
</style>

Answer 2

有多种方法可以做到这一点。我将介绍其中的 2 个。

由于您使用的是 Repeater 控件，因此您可以定义一个 <ItemTemplate>，您已经完成了。您还可以定义一个 < AlternatingItemTemplate>，它引用 "odd" 行。这样做，您可以指定背景颜色或 class.

<asp:Repeater ID="cevapgoruntuleyici" runat="server"
    OnItemDataBound="cevapgoruntuleyici_ItemDataBound">
    <ItemTemplate>
        <table width="693" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" **class="odd-row"**>
            ....
        </table>
        <br />
    </ItemTemplate>
    <AlternatingItemTemplate>
        <table width="693" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" **class="even-row"**>
            ....
        </table>
        <br />
    </AlternatingItemTemplate>
</asp:Repeater>

您也可以使用 CSS 来完成此操作，如果行内容完全相同（您只需要不同的背景颜色），这会简单得多。将重复的 table 封装在主 table 中，并向新的较大 table.

的每个 table 行添加一个 class

tr:nth-child(even) {
    background-color: yellow;
}
tr:nth-child(odd) {
    background-color: blue;
}

在 ASPX Repeater 中制作斑马纹

Making a zebra pattern in ASPX Repeater

javascript

css

asp.net

repeater