在 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)
實際做起來不難，坎尼這邊就賣個關子，有興趣的人可以自己試試 ^^
