<script type='text/javascript'><!-- 
    $(function(){ 
        //交替顯示行 
        $('#alternation').click(function(){                 
            $('tbody > tr:odd', $('#example')).toggleClass('alternation'); 
        }); 

        //三色交替顯示行 
        $('#alternationThree').click(function(){                 
            $('tbody > tr:nth-child(3n)', $('#example')).toggleClass('alternation'); 
            $('tbody > tr:nth-child(3n+2)', $('#example')).toggleClass('alternation3'); 
        }); 

        //選擇行 
        $('#selectTr').click(function(){ 
            //為表格行添加選擇事件處理 
            $('tbody > tr', $('#example')).click(function(){ 
                $('.selected').removeClass('selected');                     
                $(this).addClass('selected'); //this 表示引發(fā)事件的對(duì)象，但它不是 jquery 對(duì)象 
            }).hover(        //注意這里的鏈?zhǔn)秸{(diào)用 
                function(){ 
                    $(this).addClass('mouseOver'); 
                }, 
                function(){ 
                    $(this).removeClass('mouseOver'); 
                } 
            );                 
        }); 

        //增加排序功能 
        $('#sort').click(tableSort); 

        //獲取排好序后的主鍵值 
        $('#getSequence').click(function(){ 
            var sequence = []; 
            $('#content input[name=noticeSelect]').each(function(){ 
                sequence.push(this.value); 
            }); 
            alert(sequence.join(',')); 
        }); 

        //獲取表格中已選擇的復(fù)選框的值集合 
        $('#getSelected').click(function(){ 
            var sequence = []; 
            $('#content input[name=noticeSelect]:checked').each(function(){ 
                sequence.push(this.value); 
            }); 
            alert(sequence.join(',')); 
        }); 

        //按日期降序排列 
        $('#dateDesc').click(descByDate); 
    }); 

    //表格排序 
    function tableSort() 
    { 
        var tbody = $('#example > tbody'); 
        var rows = tbody.children(); 
        var selectedRow; 
        //壓下鼠標(biāo)時(shí)選取行 
        rows.mousedown(function(){ 
            selectedRow = this; 
            tbody.css('cursor', 'move'); 
            return false;    //防止拖動(dòng)時(shí)選取文本內(nèi)容，必須和 mousemove 一起使用 
        }); 
        rows.mousemove(function(){ 
            return false;    //防止拖動(dòng)時(shí)選取文本內(nèi)容，必須和 mousedown 一起使用 
        }); 
        //釋放鼠標(biāo)鍵時(shí)進(jìn)行插入 
        rows.mouseup(function(){                 
            if(selectedRow) 
            { 
                if(selectedRow != this) 
                { 
                    $(this).before($(selectedRow)).removeClass('mouseOver'); //插入                                                         
                } 
                tbody.css('cursor', 'default'); 
                selectedRow = null;                         
            }                                 
        }); 
        //標(biāo)示當(dāng)前鼠標(biāo)所在位置 
        rows.hover( 
            function(){                     
                if(selectedRow && selectedRow != this) 
                { 
                    $(this).addClass('mouseOver');    //區(qū)分大小寫的，寫成 'mouseover' 就不行                         
                }                     
            }, 
            function(){ 
                if(selectedRow && selectedRow != this) 
                { 
                    $(this).removeClass('mouseOver'); 
                } 
            } 
        ); 

        //當(dāng)用戶壓著鼠標(biāo)鍵移出 tbody 時(shí)，清除 cursor 的拖動(dòng)形狀，以前當(dāng)前選取的 selectedRow             
        tbody.mouseover(function(event){ 
            event.stopPropagation(); //禁止 tbody 的事件傳播到外層的 div 中 
        });     
        $('#contain').mouseover(function(event){ 
            if($(event.relatedTarget).parents('#content')) //event.relatedTarget: 獲取該事件發(fā)生前鼠標(biāo)所在位置處的元素 
            { 
                tbody.css('cursor', 'default'); 
                selectedRow = null; 
            } 
        }); 
    } 

    //按日期降序排列 
    function descByDate() 
    { 
        var descElements = $('#content > tr').get().sort(function(first, second){                 
            var f = $('td:eq(4)', first).html();    //first = $('td:eq(4)', first).html();IE 下會(huì)有問題，F(xiàn)F 正常，下同 
            var s = $('td:eq(4)', second).html(); 
            if(f < s) 
                return 1;                 
            if(f == s) 
                return 0; 
            return -1;                 
        });             
        $(descElements).appendTo('#content'); 
    } 
// --></script>

HTML：

復(fù)制代碼代碼如下:

<table id='example' style="width:650px; border-collapse:collapse;"> 
<thead style="text-align:center;" style="text-align:center;"> 
<tr><td colspan='5'>公告列表</td></tr> 
<tr> 
<th style="width:50px;">選擇</th> 
<th style="width:50px;">序號(hào)</th> 
<th style="width:300px;">標(biāo)題</th> 
<th style="width:100px;">關(guān)鍵詞</th> 
<th style="width:150px;">發(fā)布日期</th> 
</tr> 
</thead> 
<tbody id='content'> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='1' /></td> 
<td style="text-align:center;" style="text-align:center;">01</td> 
<td>微軟在 VS 2008 中引入了 jquery</td> 
<td>Microsoft</td> 
<td>2009-01-02 10:30</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='2' /></td> 
<td style="text-align:center;" style="text-align:center;">02</td> 
<td>Linux微軟Sun將探討操作系統(tǒng)的未來</td> 
<td>Sun</td> 
<td>2009-01-03 09:30</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='3' /></td> 
<td style="text-align:center;" style="text-align:center;">03</td> 
<td>聯(lián)想集團(tuán)董事長(zhǎng)柳傳志：聯(lián)想將在一年內(nèi)成功</td> 
<td>聯(lián)想</td> 
<td>2009-01-05 14:30</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='4' /></td> 
<td style="text-align:center;" style="text-align:center;">04</td> 
<td>美議員要求立法限制Google地球 違反將日罰25萬</td> 
<td>Google</td> 
<td>2009-01-10 20:45</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='5' /></td> 
<td style="text-align:center;" style="text-align:center;">05</td> 
<td>FireFox實(shí)驗(yàn)室提出新標(biāo)簽頁理念并發(fā)布原始模型</td> 
<td>FireFox</td> 
<td>2009-01-14 17:58</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='6' /></td> 
<td style="text-align:center;" style="text-align:center;">06</td> 
<td>向Ruby之父學(xué)程序設(shè)計(jì)</td> 
<td>Ruby</td> 
<td>2009-01-19 07:22</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='7' /></td> 
<td style="text-align:center;" style="text-align:center;">07</td> 
<td>Apple智能手機(jī)市場(chǎng)份額翻番達(dá)10.7%</td> 
<td>Apple</td> 
<td>2009-01-21 10:44</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='8' /></td> 
<td style="text-align:center;" style="text-align:center;">08</td> 
<td>聯(lián)發(fā)科助力 Windows Mobile加入山寨大軍</td> 
<td>聯(lián)發(fā)科</td> 
<td>2009-01-22 16:37</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='9' /></td> 
<td style="text-align:center;" style="text-align:center;">09</td> 
<td>Nokia的開源Qt開發(fā)工具4.5版發(fā)布</td> 
<td>Nokia</td> 
<td>2009-01-28 14:08</td> 
</tr> 
<tr> 
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='10' /></td> 
<td style="text-align:center;" style="text-align:center;">10</td> 
<td>GCC將接受IBM代碼支持自動(dòng)平行優(yōu)化</td> 
<td>IBM</td> 
<td>2009-02-01 21:14</td> 
</tr> 
</tbody> 
</table> 