利用 jQuery 替 GridView 加上點擊高亮顯示

在 GridView 上要做到 highlight 效果
通常會利用 mouseover 及 mouseout 兩個事件去修改背景色
之前坎尼在 MSDN 論譠看到有人想點擊後再改背景色
且點擊下一列之後，前一列要回復原來的背景色，這要怎麼做呢?

---

I. 畫面設定

首先，在畫面上加入個 GridView，並給予樣式

<asp:GridView ID="GridView1" runat="server" Width="450px"
CellPadding="4" ForeColor="#333333" GridLines="None">
    <RowStyle CssClass="rowstyle" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True"
        ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" 
        HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True"
        ForeColor="#333333" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True"
        ForeColor="White" />
    <EditRowStyle BackColor="#2461BF" />
    <AlternatingRowStyle CssClass="alterrowstyle" /> 
</asp:GridView>

可以看到，奇偶行的 RowStyle 分別有自己 class
樣式內容如下 (含 highlight 的樣式

.highlight
{
    background-color: Yellow;
}
.rowstyle
{
    background-color: #CCF3FB;
}
.alterrowstyle
{
    background-color: White;
}

II. jQuery 程式碼

接著在 javascript 區段內加入下列的 code

<script type="text/javascript">
    //記錄前一個 jQuery 物件及原class
    var preElement;
    var preClass;
    $(function() {
        //替 GridView1 的所有 tr 加入 click 事件
        $("#GridView1 tr").click(function() {
            //回復上一個物件的樣式
            if (preElement != null)
                preElement.removeClass().addClass(preClass);
            //取得目前點選物件
            var nowElement = $(this);
            //記錄物件，等待下次使用
            preElement = nowElement;
            preClass = nowElement.attr("class");
            //修改目前點選物件樣式
            nowElement.removeClass().addClass("highlight");
        });
    });
</script> 

只要在點擊下一列時，把記錄下來的上一列樣式給回復就好
是不是很簡單呢?  來看一下成果

此時有人可能會有疑問：
「既然只抓取 GridView1 內的 tr，那點到 Header 不會變色嗎?」

以這個範例來講，並不會有那種情況
雖然點下 header 時，仍會把 class 附加上去

但 header 本身已有 inline-style，優先權會高於 class
所以 background-color 會維持原來的顏色

III.小結

其實以上範例也可以用單純的 DOM 加上 javascipt 來達成

(配合 GridView 的 RowDataBound)

實際做起來不難，坎尼這邊就賣個關子，有興趣的人可以自己試試 ^^