GridView RowDataBound 動態套用列樣式：隔列換色與滑鼠懸停效果

實作程式碼

在 GridView 的 RowDataBound 事件中，針對資料列套用 CSS 類別與 JavaScript 滑鼠事件：

protected void gvSuperAdminSeeInfo_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.DataRow) return;

    // 滑鼠移入：高亮顯示
    e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#ffffcf'");

    // 隔列換色與滑鼠移出還原
    if (e.Row.RowIndex % 2 == 0)
    {
        e.Row.CssClass = "gvSuperAdminSeeInfoORow"; // 偶數列樣式
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#fff'");
    }
    else
    {
        e.Row.CssClass = "gvSuperAdminSeeInfoJRow"; // 奇數列樣式
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#f5f5f5'");
    }
}

CSS 類別定義範例

<style>
.gvSuperAdminSeeInfoORow { background-color: #fff; }
.gvSuperAdminSeeInfoJRow { background-color: #f5f5f5; }
</style>

關鍵點解析

• RowType != DataControlRowType.DataRow 排除標題列、分頁列等非資料列。
• 使用 RowIndex % 2 判斷奇偶列，套用不同 CSS 類別實現隔列換色。
• onmouseover/onmouseout 直接操作 style.backgroundColor，無需額外引用 jQuery，效能輕量。
• 滑鼠移出時還原為該列原本的底色（白色或淡灰），避免高亮殘留。

進階建議

若專案已引用 jQuery，建議改用 CSS :hover 偽類或 jQuery 委派事件管理，分離結構與行為，便於維護。但原生屬性寫法相容性最佳，無腳本依賴。