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


Posted in Javascript onMay 22, 2015

本文实例讲述了jQuery实现表格行上移下移和置顶的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery实现表格行上移下移和置顶</title>
<meta name="keywords" content="jquery,滑动" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
.demo{width:600px; margin:60px auto 10px auto; font-size:16px}
.table {border-collapse: collapse !important;width: 100%;max-width: 100%;margin-bottom: 20px;}
.table td,.table th {background-color: #fff !important;}
.table-bordered th,.table-bordered td {border: 1px solid #ddd !important;}
.table tr td {padding: 8px;line-height: 1.42857143;vertical-align: middle;border-bottom: 1px solid #ddd;}
.table tr:hover {background-color: #f5f5f5;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(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");
 });
});
</script>
</head>
<body>
<div id="main">
 <div class="demo">
  <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实现的固定页脚广告条</td>
    <td>2015-04-18</td>
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
   </tr>
   <tr>
    <td>纯CSS3制作漂亮的价格表</td>
    <td>2015-04-10</td>
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
   </tr>
   <tr>
    <td>jQuery实现的测试答题功能</td>
    <td>2015-03-29</td>
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
   </tr>
  </table>
 </div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js DOM模型操作
Dec 28 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
jquery控制表单输入框显示默认值的方法
May 22 #Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 #Javascript
JavaScript检测鼠标移动方向的方法
May 22 #Javascript
jQuery实现强制cookie过期方法汇总
May 22 #Javascript
jQuery判断指定id的对象是否存在的方法
May 22 #Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 #Javascript
JQuery分屏指示器图片轮换效果实例
May 21 #Javascript
You might like
PHP中的traits简单使用实例
2015/05/13 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
range 标准化之获取
2011/08/28 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python 实现简单的FTP程序
2019/12/27 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
聊聊python中的循环遍历
2020/09/07 Python
python打包多类型文件的操作方法
2020/09/21 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2014年纪检工作总结
2014/11/12 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Python Django项目和应用的创建详解
2021/11/27 Python