Posted in Javascript onJuly 29, 2009
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;">???lt;/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>
完整代码下载：JQuery 表格操作
JQuery 表格操作(交替显示、拖动表格行、选择行等)
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@