CheckBox改变GridView行的颜色(转载)

最新推荐文章于 2025-09-03 16:51:19 发布

转载最新推荐文章于 2025-09-03 16:51:19 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ajaxworld/archive/2007/07/08/810571.html

文章标签：

#javascript #ViewUI

本文介绍了一种在ASP.NET GridView中实现行高亮的方法，包括鼠标悬停、点击及使用复选框改变行背景色的技术细节。特别是针对带有交替颜色行的GridView，提供了JavaScript函数以确保即使在交替行的情况下也能正确实施高亮。

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

<asp:TemplateField>

<asp:CheckBox ID="chkSelect" runat="server" onclick="changeColor(this)" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Name">

<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Description">

<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</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();

}