GridView行列高亮：鼠标悬停变色实现

"GridView 行与列同时变色技术实现" 在网页开发中，GridView 是一个常用的控件，常用于展示数据表格。当需要在用户鼠标悬停时改变GridView的行和列的颜色，可以利用JavaScript和CSS来实现这一交互效果。在给定的代码片段中，我们看到一个具体的实现方法，它利用了GridView的`RowDataBound`事件以及HTML的`onmouseover`和`onmouseout`事件。 首先，我们来看`GridView1_RowDataBound`事件处理程序。这个事件在GridView的每一行绑定数据后触发。在这个事件中，我们对每行的数据行（`DataControlRowType.DataRow`）添加了鼠标悬停和离开的事件处理。 1. 鼠标悬停(`onmouseover`)时，行的背景颜色变为黄色，通过以下代码实现： ```csharp e.Row.Attributes.Add("onmouseover", "if(this!=prevselitem){this.style.backgroundColor='Yellow'}"); ``` 这段代码会改变行的背景颜色，但只有在当前行不等于之前选中的行(`prevselitem`)时才会执行。 2. 鼠标离开(`onmouseout`)时，行的背景颜色恢复原状，通过以下代码实现： ```csharp e.Row.Attributes.Add("onmouseout", "if(this!=prevselitem){this.style.backgroundColor='#ffffff'}"); ``` 当鼠标离开行时，如果该行不是当前选中的行，其背景颜色将变为白色。 接下来，对于每一列，我们同样添加了`onmouseover`和`onmouseout`事件，以实现列颜色的改变： 1. 添加列索引属性，方便后续JavaScript操作： ```csharp e.Row.Cells[i].Attributes.Add("index", i.ToString()); ``` 2. 为列添加鼠标悬停事件，调用`MouseOverItem`函数： ```csharp e.Row.Cells[i].Attributes.Add("onmouseover", "MouseOverItem(this);"); ``` 3. 为列添加鼠标离开事件，调用`MouseOutItem`函数： ```csharp e.Row.Cells[i].Attributes.Add("onmouseout", "MouseOutItem(this);"); ``` 在CSS部分，定义了两种样式类，`MyCssItem`和`MyCssItemOver`，分别对应默认和鼠标悬停时的列样式。这可以通过设置行和列的CSS类来应用样式。 在JavaScript部分，定义了两个函数： 1. `selectx(row)` 用于设置当前选中的行颜色，当有新的行被选中时，先取消之前选中的行的颜色，然后将新选中行的颜色设为绿色。 2. `MouseOverItem(ele)` 和 `MouseOutItem(ele)` 分别处理列的鼠标悬停和离开事件。这里，它们主要通过获取列的索引来定位所有列，并改变相应的颜色。 通过这种方式，当鼠标悬停在GridView的行或列上时，行和列的颜色将同时改变，提供了良好的用户交互体验。这种方法适用于需要强调用户焦点或增强表格可读性的场景。