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

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> 

 

评论

1 楼 dolphin0618 2013-05-22  

代码呢？怎么不传上来？