CheckBox改变GridView行的颜色(1)
2008-02-26 11:54
357 查看
Highlighting GridView rows using onmouseover, onclick and using checkbox are all similar features. All are pretty simple to implement. The main problem rises when using the same technique on a GridView with alternate rows with different color. Let's check out how this can be done.
First, here is the HTML code for the GridView control.
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" onclick="changeColor(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="Tan" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>
The ChangeColor function is fired whenever a checkbox is clicked.
One important point to note about Alternate rows is that there is no color assigned to them. They get the color from the style property of the table. In other words we only assign the style to the even numbered rows.
<script language="javascript" type="text/javascript">...
var color = '';
function changeColor(obj)
...{
var rowObject = getParentRow(obj);
var parentTable = document.getElementById("gvCategories");
if(color == '')
...{
color = getRowColor();
}
if(obj.checked)
...{
rowObject.style.backgroundColor = 'Yellow';
}
else
...{
rowObject.style.backgroundColor = color;
color = '';
}
// private method
function getRowColor()
...{
if(rowObject.style.backgroundColor == '') return parentTable.style.backgroundColor;
else return rowObject.style.backgroundColor;
}
}
// This method returns the parent row of the object
function getParentRow(obj)
...{
do
...{
obj = obj.parentElement;
}
while(obj.tagName != "TR")
return obj;
}
</script>
相关文章推荐
- GridView中点击CheckBox选中一行来改变此行的颜色
- CheckBox改变GridView行的颜色(转载)
- GridView中点击CheckBox选中一行来改变此行的颜色
- 模板列中CheckBox改变GridView行的颜色(2) (.cs页面实现)
- GridView控件(七)——改变通过CheckBox选中的行的样式
- GridView中动态交换列和JS控制选择CheckBox行变颜色
- gridview中鼠标都改变颜色
- 当鼠标移动到GridView控件上某行时,该行的颜色改变(GridView行变色)
- 改变checkbox的背景颜色
- Gridview绑定数据库的字段,根据条件字段颜色改变
- GridView行颜色交替及与checkbox 结合实现多选
- FM下的checkbox无法改变字体颜色解决
- Gridview的RowDataBound事件(添加删除提示,改变背景颜色)
- 改变gridview 某特定行的颜色(一)
- ASPxGridview根据条件将符合条件的行颜色改变等
- gridview repeater DataList 鼠标经过改变背景颜色
- gridview repeater DataList 鼠标经过改变背景颜色
- gridview鼠标经过某行改变样式、颜色并且单击弹出窗口
- Asp.Net中GridView加入鼠标滑过的高亮效果和单击行颜色改变
- gridview根据条件来改变行的颜色以及改变单元格的颜色。