::SANKAI::

• 精選名稱：JQuery Colorize
• 授權模式：MIT & GPL
• 官方網頁：http://franca.exofire.net/jq/colorize
• 官方展示：http://franca.exofire.net/js/stripes_plugin.html

「身為一個專業的資料表格(grid table)，隨著鼠標滑過資料列時會變色是很合理的。正如我所說的，身為一個專業的資料表格，當資料列被點擊時會變色，也是很合理的」。一般來講，table資料列(row)的滑過變色，可以透過CSS樣式表設定:hover就可以完成，但是我們還需要一個「點擊變色」的效果，為了讓我們的資料表格表現的很專業，我們就必需來試試這個好用的plugin - colorize

用colorize來變色有多簡單？

$('#yourTableId').colorize() ;

沒錯，就是一句那麼簡單，接下來你就會發現你的資料表格已經晉陞為專業資料表格了(笑)，這時候試著點擊資料的任何一列，他就會被換上代表標記的黃色底色，不過你可能想要的是只是選取一列，而不是多列，或則你不喜歡黃色的底色，這時候我們就給他一些選用的參數，下列是各選用參數的說明

$('#yourTableId').colorize({
    //交錯顏色，也就是斑馬紋，預設是#ECF6FC
    altColor : '#ECF6FC',
    //底色，預設是白色
    bgColor : 'white',
    //滑過時的顏色，預設是#BCD4EC
    hoverColor : '#BCD4EC',
    //選取的顏色，預設是黃色
    hiliteColor : 'yellow',
    //轉為以欄位變色，預設是false(換句話說就是以資料列變色)
    columns : false,
    //限定只能選取一項，預設是false
    oneClick : false,
    //將指定的欄位無法選取，預設是空陣列
    banColumns: []
}) ;

在大致上經過測試都沒什問題，不過在實作上我發現他似乎少了一個參數，那就是「預選」的功能，換句話說，我想要讓表格在網頁讀取完畢後，就將某幾列(或欄)標示已選取(黃色)，原本想說以事件來觸發他選取變色的效果，不過第一次的寫法讓我碰到釘子

//觸發表格的第三列被點擊
$('tr:eq(2)',$('#yourTableId')).trigger('click');

=__= 沒有成功，很直覺得就是寫這樣，但不知道為什麼沒有成功，該死！我又要去趴原始碼了=3=，在啃完原始碼後，我改試了下列的方式

//將資料表的第三列變色
$('tr:eq(2)',$('#yourTableId')).trigger('mouseover');
$('tr:eq(2)',$('#yourTableId')).find('td').trigger('click');

=v=可以了耶！竟然要先觸發滑過的事件，再進行click，因為原始碼中有一個變數的註冊值，只當mouseover才會去做，click變色又必需使用到那個變數，再來就是他的事件是註冊在td而不是tr，呼~花了好多的時間ˋˊ

這邊要特別提醒是，表格的設計最好使用thead、tbody、tfoot的方式，這樣變色的作用才不會也套上了th的欄位列，你總不會想要讓使用者選取欄位列吧？而且這也是唯一讓欄位列不變色的方法。最後可喜的是他授權方式包含了MIT，所以可以安安心心的使用

//原始程式碼
	jQuery(this).find('tr:odd').css('background', options.bgColor);
	jQuery(this).find('tr:even').css('background', options.altColor);
	var cells = jQuery(this).find('td,th');
//改成下列這樣
	jQuery(this).find('tbody').find('tr:odd').css('background', options.bgColor);
	jQuery(this).find('tbody').find('tr:even').css('background', options.altColor);
	var cells = jQuery(this).find('tbody').find('td,th');

另外我同時找到相同效果的plugin - jQuery columnHover plugin，不過他沒有選取變色的功能，所以我放棄它

JQuery Colorize備存檔案載點