前几天在博问里发现有人问关于 GridView点击行变色 的问题，突然想起很久很久以前，写过一篇文章 一个简单但常用的表格样式－－鼠标划过行变色－－简洁实现 ，是关于表格行颜色交替和鼠标指向时变色的，正好今天把那一篇补充和扩展一下
JavaScript 和 CSS 是网页开发中的两种关键技术，用于实现交互性和视觉样式。在本文中，我们将讨论如何使用它们来实现GridView行背景色的交替、鼠标划过行变色以及点击行变色选中。GridView通常是在ASP.NET中用于显示数据的控件，而JavaScript则可以用来增强用户交互体验。
GridView在默认情况下提供了`AlternatingRowStyle`属性，用于设置交替行的背景色。然而，这种方式可能在HTML渲染时产生混乱，不易控制。我们可以通过JavaScript动态地改变行的背景色，以获得更整洁的代码和更好的效果。
以下是一个简单的JavaScript函数`GridViewColor`，它接受五个参数：GridView的ID、正常行的背景色、交替行的背景色、鼠标悬停时的背景色以及点击后的背景色。这个函数首先获取GridView内的所有行，然后根据索引设置行的初始背景色。如果指定了鼠标悬停和点击后的颜色，还会为行添加相应的事件监听器，以便在用户交互时改变行的背景色。
```javascript
function GridViewColor(GridViewId, NormalColor, AlterColor, HoverColor, SelectColor) {
var AllRows = document.getElementById(GridViewId).getElementsByTagName("tr");
for (var i = 1; i < AllRows.length; i++) {
AllRows[i].style.background = i % 2 == 0 ? NormalColor : AlterColor;
if (HoverColor != "") {
AllRows[i].onmouseover = function () { this.style.background = HoverColor; };
AllRows[i].onmouseout = function () { if (this.style.background != SelectColor) this.style.background = (i % 2 == 0 ? NormalColor : AlterColor); };
}
if (SelectColor != "") {
AllRows[i].onclick = function () {
for (var j = 1; j < AllRows.length; j++) {
AllRows[j].style.background = (j % 2 == 0 ? NormalColor : AlterColor);
}
this.style.background = SelectColor;
};
}
}
}
```
在HTML中，我们需要将此函数绑定到窗口的`onload`事件，确保在执行JavaScript代码之前页面已经完全加载。同时，通过服务器端代码（如ASP.NET的`<%=`语法）获取GridView的客户端ID，以便在JavaScript中正确引用它。
```html
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="gvMeiMingZi"></asp:GridView>
</form>
<script type="text/javascript">
window.onload = function () {
GridViewColor("<%=gvMeiMingZi.ClientID%>", "#fff", "#eee", "#6df", "#fd6");
};
</script>
</body>
```
这个示例中，`#fff`代表白色（正常行背景色），`#eee`代表浅灰色（交替行背景色），`#6df`代表青绿色（鼠标悬停时的背景色），`#fd6`代表橙黄色（点击后的背景色）。你可以根据自己的需求更改这些颜色值。
为了适应不同的环境和控件，例如非ASP.NET环境或直接的HTML表格，只需要将上述代码稍作修改，将GridView替换为对应的表格元素（`<table>`），并确保正确引用表格的行（`<tr>`）即可。
通过这种方法，我们可以创建一个更加生动且具有用户友好的GridView，用户不仅可以直观地看到行的交替颜色，还可以通过鼠标悬停和点击来突出显示行，提高数据浏览的可读性和互动性。同时，这种实现方式不需要复杂的CSS或JavaScript库，适用于初学者和快速原型开发。
