在GridView上加上光棒效果, 在網路上找到都是在RowDataBound事件中, 在Row的Attributes上增加onmouseout、onmouseover二個屬性
在此提供JavaScript的範例。
線上示範：http://aqr198.googlepages.com/table_lightbar.htm
參數說明：
table$(<<表格名稱>>).RowStyle({
overcss:MouseOver時的CSS名稱,
rowname:每列的ID名稱
rowcss:每列的CSS名稱,
cellcss:每欄的CSS名稱,
cellname:每欄的ID名稱,
rowInit:標題起始列
});
透過JavaScript操作table的dom上, 有幾個重要屬性
table.rows 可以操作每列(TR)的物件
table.rows[i].cells 可以操作每欄(TD)的物件
table.rows[i].rowIndex 可以取得每列的索引值, 由零開始
table.rows[i].cells[i].cellIndex 可以取得每欄的索引值, 由零開始
使用Fluent interface的寫法
設定方法看起來像是JQuery串接的方法, 重點是每個方法的最後加上(return me;), 就可以一直串接下去了。
function table$(name){
return new tag_table(name);
}
function tag_table(tb_name){
var o = document.getElementById(tb_name);
var me = this;
this.RowStyle = function(cf){
return me;
}
}
Fluent interface相關文章：
http://fillano.blog.ithome.com.tw/post/257/18421
http://ithelp.ithome.com.tw/question/10005623
光棒效果是網頁表格經常使用的功能, 透過JavaScript來套用, 就不需要因為網頁程式語言的不同, 學習不同的處理方法
只要JavaScript不死, 此方法永久有效^^
以上~~
程式 (3)
謝謝你提供的方法，但是我這裡碰到一個問題，假如Gridview有設分頁 分頁的Row也會被有光棒效果，請問要如何必免
看懂了你的問題了 在table_style.js內有一段code如下 function rowFN(row,cf){ if(row.rowIndex<=cf.rowInit){return false;} //設定結束點 if(row.rowIndex>=cf.rowEnd){return false;} 略... } 增加結束點設定 table$(<<表格名稱>>).RowStyle({ overcss:MouseOver時的CSS名稱, rowname:每列的ID名稱 rowcss:每列的CSS名稱, cellcss:每欄的CSS名稱, cellname:每欄的ID名稱, rowInit:標題起始列, rowEnd:結束列 }); 或者使用o.rows.length設定最後一列不進行套色 cf.rowEnd = o.rows.length-1; each(o.rows,function(row){ 略... });