Question

我的网页上有一个转发器，我想改变背景颜色。第一个将是蓝色，第二个黄色，然后是蓝色等等。我有下表但不知道如何在转发器上实现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

您当前的结构将创建多个表格，即对于集合中的每个项目，将呈现一个单独的表格，这是错误的。您只需要一个包含多行的表，因此要解决这个问题，请在 HeaderTemplate 和 FooterTemplate 中使用表定义。如下图所示： -

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

这将只渲染一个表，其中包含与集合中存在的行数一样多的行。接下来只需在表格中找到 odd 和 even 行，并设置CSS颜色如下： -

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

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

Answer 2

有多种方法可以做到这一点。我将超过其中的两个。

由于您使用的是Repeater控件，因此您可以定义<ItemTemplate>，您已完成此操作。您还可以定义< AlternatingItemTemplate>，它指的是＆＃34; odd＆＃34;行。这样做，您可以指定背景颜色或类。

<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来完成此操作，如果行内容完全相同（您只需要不同的背景颜色），这将更加简单。将重复的表封装在主表中，并将类添加到新的较大表的每个表行中。

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

在ASPX中继器中制作斑马纹

2 个答案: