Repeater控件的怎样实现斑马线效果？？

Question

用Repeater控件实现斑马线效果，并且当我点击按钮做操作刷新页面时，斑马线效果依然存在，我点击加号按钮时，显示GridView里的数据，但是斑马线效果就不存在了。或者单击上一页下一页分页按钮，斑马线效果也不存在了，应该怎么改改呢？？？JS代码：
<script type="text/javascript">
      //斑马线效果
        $(document).ready(function(){     // Your code here   
            $("#FMListInfo tbody tr").each(function(i){
                if(i % 4 == 0)
                   $(this).css("background-color","white");
                else
                   $(this).css("background-color","#EFF3FB");
            });
            $("#FMListInfo tr th").css("background-color","#507CD1");
        });
    </script>
HTML代码：
<asp:Repeater ID="RPT__FMArrivalOrder" runat="server" OnItemCommand="RPT__FMArrivalOrder_ItemCommand">
<HeaderTemplate>
                                        <table cellpadding="0" cellspacing="0" style="width: 100%;" id="FMListInfo">
                                            <thead>
                                                <tr style="height: 22px; text-align: center; background-color: #507CD1; font-weight: bold;
                                                    color: White;">
                                                    <th style="width: 1%">
                                                        &nbsp;
                                                    </th>
                                                    <th>
                                                        ArrivalBill
                                                    </th>
                                                    <th>
                                                        PEN
                                                    </th>
                                                    <th>
                                                        ProductNum
                                                    </th>
                                                    <th>
                                                        Region
                                                    </th>
                                                    <th>
                                                        Color
                                                    </th>
                                                    <th>
                                                        CodeName
                                                    </th>
                                                    <th>
                                                        Quantity
                                                    </th>
                                                    <th>
                                                        Order Quantity
                                                    </th>
                                                </tr>
                                            </thead>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tbody>
                                            <tr align="center" onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#AADEFF'"
                                                onmouseout="this.style.backgroundColor=currentcolor">
                                                <td style="width: 1%;">
                                                    <asp:ImageButton ID="imgBtnShow" runat="server" ImageUrl="~/Images/puls.gif" CommandArgument='<%#Eval("BatchNum") %>'
                                                        CommandName="ShowDetail" /><asp:ImageButton ID="imgBtnHidden" runat="server" ImageUrl="~/Images/mins.gif"
                                                            CommandArgument='<%#Eval("BatchNum") %>' CommandName="HiddenDetail" Visible="false" />
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblArrivalBill" runat="server" Text='<%#Eval("ArrivalNum") %>'></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblPEN" runat="server" Text='<%#Eval("PEN") %>'></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblProductNumber" runat="server" Text='<%#Eval("ProductNum") %>'></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblRegion" runat="server" Text='<%#Eval("Region") %>'></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblColor" runat="server" Text='<%#Eval("Color") %>'></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblCodeName" runat="server" Text='<%#Eval("CodeName") %>'></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:Label ID="lblTotalQuantity" runat="server" Text='<%#Eval("Quantity") %>'></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtQuantity" Width="60" runat="server" Text="0"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="9" style="padding-left: 50px;">
                                                    <asp:Panel ID="pl_ShowHiddenDetail" runat="server">
                                                        <asp:GridView ID="GV_DetailList" runat="server" AutoGenerateColumns="false" CssClass="ZebraCrossing">
                                                            <Columns>
                                                                <asp:TemplateField HeaderText="Project Name">
                                                                    <ItemTemplate>
                                                                        <%#GetProjectNameByProjectID(Convert.ToInt32(Eval("ProjectID"))) %>
                                                                    </ItemTemplate>
                                                                </asp:TemplateField>
                                                                <asp:BoundField DataField="Quantity" HeaderText="Order Quantity" SortExpression="Quantiy" />
                                                            </Columns>
                                                            <HeaderStyle BackColor="#507CD1" Font-Bold="true" ForeColor="White" HorizontalAlign="Left" />
                                                        </asp:GridView>
                                                        <asp:Label ID="lbl_lastQuantity" runat="server" Text=""></asp:Label>
                                                    </asp:Panel>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </table>
                                    </FooterTemplate>
                                </asp:Repeater>

Answer 1

<script type="text/javascript">
  //斑马线效果
  $(document).ready(function(){ // Your code here   
  $("#FMListInfo tbody tr").each(function(i){
  if(i % 4 == 0)
  $(this).css("background-color","white");
  else
  $(this).css("background-color","#EFF3FB");
  });
  $("#FMListInfo tr th").css("background-color","#507CD1");
  });
  </script><asp:Repeater ID="RPT__FMArrivalOrder" runat="server" OnItemCommand="RPT__FMArrivalOrder_ItemCommand">
<HeaderTemplate>
  <table cellpadding="0" cellspacing="0" style="width: 100%;" id="FMListInfo">
  <thead>
  <tr style="height: 22px; text-align: center; background-color: #507CD1; font-weight: bold;
  color: White;">
  <th style="width: 1%">
  &nbsp;
  </th>
  <th>
  ArrivalBill
  </th>
  <th>
  PEN
  </th>
  <th>
  ProductNum
  </th>
  <th>
  Region
  </th>
  <th>
  Color
  </th>
  <th>
  CodeName
  </th>
  <th>
  Quantity
  </th>
  <th>
  Order Quantity
  </th>
  </tr>
  </thead>
  </HeaderTemplate>
  <ItemTemplate>
  <tbody>
  <tr align="center" onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#AADEFF'"
  onmouseout="this.style.backgroundColor=currentcolor">
  <td style="width: 1%;">
  <asp:ImageButton ID="imgBtnShow" runat="server" ImageUrl="~/Images/puls.gif" CommandArgument='<%#Eval("BatchNum") %>'
  CommandName="ShowDetail" /><asp:ImageButton ID="imgBtnHidden" runat="server" ImageUrl="~/Images/mins.gif"
  CommandArgument='<%#Eval("BatchNum") %>' CommandName="HiddenDetail" Visible="false" />
  </td>
  <td>
  <asp:Label ID="lblArrivalBill" runat="server" Text='<%#Eval("ArrivalNum") %>'></asp:Label>
  </td>
  <td>
  <asp:Label ID="lblPEN" runat="server" Text='<%#Eval("PEN") %>'></asp:Label>
  </td>
  <td>
  <asp:Label ID="lblProductNumber" runat="server" Text='<%#Eval("ProductNum") %>'></asp:Label>
  </td>
  <td>
  <asp:Label ID="lblRegion" runat="server" Text='<%#Eval("Region") %>'></asp:Label>
  </td>
  <td>
  <asp:Label ID="lblColor" runat="server" Text='<%#Eval("Color") %>'></asp:Label>
  </td>
  <td>
  <asp:Label ID="lblCodeName" runat="server" Text='<%#Eval("CodeName") %>'></asp:Label>
  </td>
  <td>
  <asp:Label ID="lblTotalQuantity" runat="server" Text='<%#Eval("Quantity") %>'></asp:Label>
  </td>
  <td>
  <asp:TextBox ID="txtQuantity" Width="60" runat="server" Text="0"></asp:TextBox>
  </td>
  </tr>
  <tr>
  <td colspan="9" style="padding-left: 50px;">
  <asp:Panel ID="pl_ShowHiddenDetail" runat="server">
  <asp:GridView ID="GV_DetailList" runat="server" AutoGenerateColumns="false" CssClass="ZebraCrossing">
  <Columns>
  <asp:TemplateField HeaderText="Project Name">
  <ItemTemplate>
  <%#GetProjectNameByProjectID(Convert.ToInt32(Eval("ProjectID"))) %>
  </ItemTemplate>
  </asp:TemplateField>
  <asp:BoundField DataField="Quantity" HeaderText="Order Quantity" SortExpression="Quantiy" />
  </Columns>
  <HeaderStyle BackColor="#507CD1" Font-Bold="true" ForeColor="White" HorizontalAlign="Left" />
  </asp:GridView>
  <asp:Label ID="lbl_lastQuantity" runat="server" Text=""></asp:Label>
  </asp:Panel>
  </td>
  </tr>
  </tbody>
  </ItemTemplate>
  <FooterTemplate>
  </table>
  </FooterTemplate>
  </asp:Repeater>

Answer 2

用这个js就可以达到效果:
tr 
   {       background-color: #fff;
      }        tr:hover        {          
            background-color: #96d447;
        }

Answer 3

你的斑马线是JS写上去的吧  用CSS写试试
JS写的话 有个顺序问题 你的页面必须先加载 然后再掉JS 除非客户是IE9能过滤此功能
所以 你的斑马线消失 有可能是你页面执行事件的时候 影响了 初始时加载的斑马线JS 再加载一次就行了

Answer 4

 恩 谢谢楼上几位
我在repeater的ItemDataBound事件中写了 这样就不用再次加载js了。/// <summary>
        /// 斑马线效果
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RP_ProjectInventory_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            int i = e.Item.ItemIndex;
            if (i % 2 != 0)
            {
                HtmlTableRow row = (HtmlTableRow)e.Item.FindControl("row");
                if (row != null)
                {
                    row.BgColor = "#EFF3FB";
                }
            }
        }