突出显示所选行没有循环

时间:2017-06-20 17:00:55

标签: javascript asp.net gridview

我有javascript更改所选行的背面颜色。而对于其他行,它使用两种背面颜色替代行。 如何在javascript中给出out循环实现相同的效果。

我的aspx设计页面:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                OnRowCreated="GridView1_RowCreated" Width="80%" BackColor="#3366FF">
                <FooterStyle CssClass="FooterStyle" />
                <RowStyle CssClass="RowStyle" />
                <HeaderStyle CssClass="HeaderStyle" />
                <AlternatingRowStyle BackColor="#6699FF" />
                <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" >
<ItemStyle Width="150px"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" >
<ItemStyle Width="150px"></ItemStyle>
                    </asp:BoundField>
                </Columns>
            </asp:GridView>

使用Javascript:

<script type="text/javascript">
        var gridViewCtlId = '<%=GridView1.ClientID%>';
        var gridViewCtl = null;
        var curSelRow = null;
        var oddrowcolor = null;
        var evenrowcolor = null;
        function getGridViewControl() {
            if (null == gridViewCtl) {
                gridViewCtl = document.getElementById(gridViewCtlId);
            }
        }
        function onGridViewRowClick(rowIndex) {
            var table = document.getElementById("GridView1");
            for (var i = 1; i < table.rows.length; i++) {
                if (i % 2 != 1) {
                    table.rows[i].style.backgroundColor = '#6699FF';
                }
                else {
                    table.rows[i].style.backgroundColor = '#3366FF';
                }
            }
            var selRow = getClickedRow(rowIndex);
            if (null != selRow) {
                selRow.style.backgroundColor = '#FFCC33';
            }
        }

        function getClickedRow(rowIndex) {
            getGridViewControl();
            if (null != gridViewCtl) {
                return gridViewCtl.rows[rowIndex];
            }
            return null;
        }
    </script>

后端c#代码:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                int rowid = Convert.ToInt32(e.Row.RowIndex) + 1;
                e.Row.Attributes.Add("onclick", "onGridViewRowClick('" + rowid.ToString() + "')");
            }
        }

0 个答案:

没有答案