使用 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 的拖动形状，以前当前选取的 selectedRowtbody.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 表格操作