JQuery 表格操作（交替显示、拖动表格行、选择行等）

JQuery 确实很方便，简单的代码，却能实现一些不错的功能。
复制代码代码如下:
<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 表示引发事件的对象，但它不是 jquery 对象
            }）.hover（        //注意这里的链式调用
                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（","））;
        }）;

        //获取表格中已选择的复选框的值集合
        $（"#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;
        //压下鼠标时选取行
        rows.mousedown（function（）{
            selectedRow = this;
            tbody.css（"cursor", "move"）;
            return false;    //防止拖动时选取文本内容，必须和 mousemove 一起使用
        }）;
        rows.mousemove（function（）{
            return false;    //防止拖动时选取文本内容，必须和 mousedown 一起使用
        }）;
        //释放鼠标键时进行插入
        rows.mouseup（function（）{
            if（selectedRow）
            {
                if（selectedRow ！= this）
                {
                    $（this）.before（$（selectedRow））.removeClass（"mouseOver"）; //插入
                }
                tbody.css（"cursor", "default"）;
                selectedRow = null;
            }
        }）;
        //标示当前鼠标所在位置
        rows.hover（
            function（）{
                if（selectedRow && selectedRow ！= this）
                {
                    $（this）.addClass（"mouseOver"）;    //区分大小写的，写成 "mouseover" 就不行
                }
            },
            function（）{
                if（selectedRow && selectedRow ！= this）
                {
                    $（this）.removeClass（"mouseOver"）;
                }
            }
        ）;

        //当用户压着鼠标键移出 tbody 时，清除 cursor 的拖动形状，以前当前选取的 selectedRow
        tbody.mouseover（function（event）{
            event.stopPropagation（）; //禁止 tbody 的事件传播到外层的 div 中
        }）;
        $（"#contain"）.mouseover（function（event）{
            if（$（event.relatedTarget）.parents（"#content"）） //event.relatedTarget: 获取该事件发生前鼠标所在位置处的元素
            {
                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 下会有问题，FF 正常，下同
            var s = $（"td:eq（4）", second）.html（）;
            if（f < s）
                return 1;
            if（f == s）
                return 0;
            return -1;
        }）;
        $（descElements）.appendTo（"#content"）;
    }
// --></script>

HTML：
复制代码代码如下:
<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;">序號</th>
<th style="width:300px;">標題</th>
<th style="width:100px;">關鍵詞</th>
<th style="width:150px;">發布日期</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将探讨操作系统的未来</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>联想集团董事长柳传志：联想将在一年内成功</td>
<td>聯想</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实验室提出新标签页理念并发布原始模型</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之父学程序设计</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智能手机市场份额翻番达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>联发科助力 Windows Mobile加入山寨大军</td>
<td>联发科</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开发工具4.5版发布</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代码支持自动平行优化</td>
<td>IBM</td>
<td>2009-02-01 21:14</td>
</tr>
</tbody>
</table>

完整代码下载：JQuery 表格操作