我有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() + "')");
}
}