秉持著程式越寫越輕鬆的目標 "write less do more"！

有別於前一篇文章 http://ithelp.ithome.com.tw/question/10095554。
本篇嘗試將前一篇的程式模組化，好處如下：

1. 當網頁有多個 <table> 且 <table> 需要同樣效果，
   只要將不同參數(例如：Table ID)傳入模組即可。
2. 程式碼重複利用。

範例程式使用 jQuery 功能，如下：

1. 動態增加 CSS .addClass()
2. 動態刪除 CSS.removeClass()
3. 滑鼠移出移入 .hover()
4. 擴充/變更物件屬性 .extend()
5. DOM 載入完畢，執行的動作 .ready()

HTML

<table id="student">
<tbody>
    <tr><td>1</td><td>jason</td></tr>
    <tr><td>2</td><td>thomas</td></tr>
    <tr><td>3</td><td>kert</td></tr>
    <tr><td>4</td><td>jay</td></tr>
</tbody>
</table>

<br/>

<table id="stuff">
<tbody>
    <tr><td>1</td><td>sunny</td></tr>
    <tr><td>2</td><td>rita</td></tr>
    <tr><td>3</td><td>kevin</td></tr>
    <tr><td>4</td><td>jaling</td></tr>
</tbody>
</table>

CSS

#student,#stuff{ width:98%; border-collapse:collapse; } 
#student th, #student td, #stuff th, #stuff td{ border: silver 1px solid; text-align:center; }

.odd{background-color:#EFF1F1;}
.even{background-color:#F8F8F8;}
.enter{background-color: #0099CC;}

JavaScript

// 設計 Table - 選取方法
function TableSelection(conf) {
    // 宣告匿名物件設定檔
    var _config = {
        table_id: '',
        odd: '',
        even: '',
        over: ''
    };
    
    // 擴充/變更設定檔參數。 
    $.extend(_config, conf); 
    
    // Table 基偶數列變色 + 滑鼠移出移入效果
    $("#" + _config.table_id + " tr:odd").addClass(_config.odd);
    $("#" + _config.table_id + " tr:even").addClass(_config.even);
    $("#" + _config.table_id + "  tr").hover(
                    function() {
                        $(this).addClass(_config.over);
                    }
                    , function() {
                        $(this).removeClass(_config.over);
                    }
     );
}

// DOM 載入完畢，執行的動作
jQuery(document).ready(function(){
    
    var params = {
        table_id: 'student',
        odd: 'odd',
        even: 'even',
        over: 'enter'
    }; // 初始 Table ID 為 student 的參數 (匿名物件)
    
    TableSelection(params); // 為 Table ID 為 student 增加特效   
 
    $.extend(params , 
        { table_id: 'stuff' } // 初始 Table ID 為 stuff 的參數 (匿名物件)
    );  // 擴充/變更設定檔參數。
    
    TableSelection(params); // 為 Table ID 為 stuff 增加特效    
    
});
// 附註 ：jQuery(document).ready(function(){...}); 和 
// $(function(){...}); 意思相同

執行結果，請點我 -> http://jsfiddle.net/jasonhsu/hcH8M/18/
附註：以上關鍵字可參考 JQuery API：<http://api.jquery.com/ >

若有更佳方法，請各位指導~感謝