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：

复制代码代码如下:

　　<tr>

　　</tr>

　　</thead>

　　<tr>

　　<td>微軟在 VS 2008 中引入了 jquery</td>

　　<td>Microsoft</td>

　　</tr>

　　<tr>

　　<td>Linux微软Sun将探讨操作系统的未来</td>

　　</tr>

　　<tr>

　　<td>联想集团董事长柳传志：联想将在一年内成功</td>

　　</tr>

　　<tr>

　　<td>美议员要求立法限制Google地球违反将日罚25万</td>

　　<td>Google</td>

　　</tr>

　　<tr>

　　<td>FireFox实验室提出新标签页理念并发布原始模型</td>

　　<td>FireFox</td>

　　</tr>

　　<tr>

　　<td>向Ruby之父学程序设计</td>

　　</tr>

　　<tr>

　　<td>Apple智能手机市场份额翻番达10.7%</td>

　　<td>Apple</td>

　　</tr>

　　<tr>

　　<td>联发科助力 Windows Mobile加入山寨大军</td>

　　</tr>

　　<tr>

　　<td>Nokia的开源Qt开发工具4.5版发布</td>

　　<td>Nokia</td>

　　</tr>

　　<tr>

　　<td>GCC将接受IBM代码支持自动平行优化</td>

　　</tr>

　　</tbody>

　　</table>

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

教程首页更多教程