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

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

复制代码 代码如下: $(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 return 1; if(f == s) return 0; return -1; }); $(descElements).appendTo('#content'); } // --> HTML： 复制代码 代码如下: 公告列表 選擇 序號 標題 關鍵詞 發布日期 01 微軟在 VS 2008 中引入了 jquery Microsoft 2009-01-02 10:30 02 Linux微软Sun将探讨操作系统的未来 Sun 2009-01-03 09:30 03 联想集团董事长柳传志：联想将在一年内成功 聯想 2009-01-05 14:30 04 美议员要求立法限制Google地球 违反将日罚25万 Google 2009-01-10 20:45 05 FireFox实验室提出新标签页理念并发布原始模型 FireFox 2009-01-14 17:58 06 向Ruby之父学程序设计 Ruby 2009-01-19 07:22 07 Apple智能手机市场份额翻番达10.7% Apple 2009-01-21 10:44 08 联发科助力 Windows Mobile加入山寨大军 联发科 2009-01-22 16:37 09 Nokia的开源Qt开发工具4.5版发布 Nokia 2009-01-28 14:08 10 GCC将接受IBM代码支持自动平行优化 IBM 2009-02-01 21:14 完整代码下载： JQuery 表格操作


01	微軟在 VS 2008 中引入了 jquery	Microsoft	2009-01-02 10:30
02	Linux微软Sun将探讨操作系统的未来	Sun	2009-01-03 09:30
03	联想集团董事长柳传志：联想将在一年内成功	聯想	2009-01-05 14:30
04	美议员要求立法限制Google地球违反将日罚25万	Google	2009-01-10 20:45
05	FireFox实验室提出新标签页理念并发布原始模型	FireFox	2009-01-14 17:58
06	向Ruby之父学程序设计	Ruby	2009-01-19 07:22
07	Apple智能手机市场份额翻番达10.7%	Apple	2009-01-21 10:44
08	联发科助力 Windows Mobile加入山寨大军	联发科	2009-01-22 16:37
09	Nokia的开源Qt开发工具4.5版发布	Nokia	2009-01-28 14:08
10	GCC将接受IBM代码支持自动平行优化	IBM	2009-02-01 21:14

JQuery 表格操作(交替显示、拖动表格行、选择行等)_javascript技巧