用javascript/css實現GridView行背景色交替、點選行變色

前幾天在博問裡發現有人問關於 GridView點選行變色 的問題，突然想起很久很久以前，寫過一篇文章 一個簡單但常用的表格樣式－－滑鼠劃過行變色－－簡潔實現 ，是關於表格行顏色交替和滑鼠指向時變色的，正好今天把那一篇補充和擴充套件一下，加上滑鼠點選選擇（其實只是點選後變個顏色，“選擇”這個詞在這裡不合適），順便把這個直接應用到GridView上，如果是其他的控制元件，或者直接的HTML，稍加修改也可以用上，這裡僅提供一個思路。雖然GridView 使用AlternatingRowStyle提供了交替行背景色的問題，但這個東西用著實在不爽，看它生成到HTML的那個table，那叫一個亂啊。

    下面是程式碼，註釋應該還算比較詳細，比較適合初學者，可以把下面兩個檔案的程式碼直接複製到你的專案中直接執行。最下面有檔案的下載地址，也可以直接下載後執行，程式碼在IE7和Firefox2下測試通過，有任何問題，請在下面留言，我將盡量及時回覆。

BackgroundColor.aspx
主要包含一個GridView，是我們折騰的重點物件，還有一堆javascript，是我們折騰GridView的手段






   


   

        
   

   



BackgroundColor.aspx.cs
用於生成一堆用於測試的資料，不然前面的GridView裡啥也沒有，就看不出效果了
using System;
using System.Data;

public partial class _BackgroundColor:System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //生成DataTable並新增10個列
        DataTable dt = new DataTable();
        for(int i = 0; i < 10; i++)
        {
            dt.Columns.Add();
        }

        //往DataTable裡新增20行資料
        for(int i = 0; i < 20; i++)
        {
            dt.Rows.Add(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
        }

        //將DataTable繫結到GridView
        gvMeiMingZi.DataSource = dt;
        gvMeiMingZi.DataBind();
    }
}

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12921506/viewspace-277853/，如需轉載，請註明出處，否則將追究法律責任。