首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

jQuery实现表格行上移下移和置顶

相信爱 2015-5-3 [jQuery] 来自PC 复制链接
21227
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序。
HTML页面上是一个简单的数据表格,我们在数据行中分别放置“上移”,“下移”和“置顶”三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作。
<table class="table"><tr><td>HTML5获取地理位置定位信息</td><td>2015-04-25</td><td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td></tr><tr><td>CSS+Cookie实现的固定页脚广告条置顶</a></td></tr>...</table>
jQuery我们需要预先把jQuery库文件载入,然后分别绑定上移、下移和置顶三个操作的click事件。以“上移”为例,当点击时,获取当前点击的行内容,及tr,然后判断该行是不是第一行,如果不是第一行,那么就将该行插入到上一行的前面,实现了互换的目的。当然我们可以给行加fadeOut()和fadeIn()过渡效果,这样看起来会更生动些,否则上移的过程会一闪而过。

“下移”和“置顶”操作流程都差不多,请看代码:$(function(){
//上移var $up = $(".up")$up.click(function() {var $tr = $(this).parents("tr");if ($tr.index() != 0) {$tr.fadeOut().fadeIn();$tr.prev().before($tr);}});
//下移var $down = $(".down");var len = $down.length;$down.click(function() {var $tr = $(this).parents("tr");if ($tr.index() != len - 1) {$tr.fadeOut().fadeIn();$tr.next().after($tr);}});
//置顶var $top = $(".top");$top.click(function(){var $tr = $(this).parents("tr");$tr.fadeOut().fadeIn();$(".table").prepend($tr);$tr.css("color","#f60");});});

当然,实际应用中应该结合您的项目,在操作“上移”,“下移”和“置顶”完成时,应该和后台程序进行Ajax异步交互,保证排序数据真正被后台记录,然后刷新后会展示新的排序结果,本文不再对该异步操作做详细解说,就此结题。



上一篇:淘宝客服工作流程及商品销售管理
下一篇:如何使用jQuery+PHP+MySQL来实现一个在线测试项目
362938688 发表于 2015-6-2 17:44:05 来自PC
来通过jQuery实现这些操作
www.yandaoqingxi.cn|www.jjpd888.com|www.jjjnews.top|www.bjxdc2001.com|www.gchb001.com|www.seoh.cn网站推广
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表