使用 JQuery 操作表格(交替显示、拖动表格行、选择行等)

JQuery 确实很方便，简单的代码，却能实现一些不错的功能。 

<mce: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'); } // --></mce:script>

HTML：

<table id='example' style="width:650px; border-collapse:collapse;"> <thead style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='1' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='2' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='3' /></td> <td style="text-align:center;" mce_style="text-align:center;">03</td> <td>联想集团董事长柳传志：联想将在一年内成功</td> <td>聯想</td> <td>2009-01-05 14:30</td> </tr> <tr> <td style="text-align:center;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='4' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='5' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='6' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='7' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='8' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='9' /></td> <td style="text-align:center;" mce_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;" mce_style="text-align:center;"><input type='checkbox' name='noticeSelect' value='10' /></td> <td style="text-align:center;" mce_style="text-align:center;">10</td> <td>GCC将接受IBM代码支持自动平行优化</td> <td>IBM</td> <td>2009-02-01 21:14</td> </tr> </tbody> </table>

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