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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JavaScript函数基础详解
Feb 03 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
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-MySQL教程归纳总结
2008/06/07 PHP
php 小乘法表实现代码
2009/07/16 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
模具专业推荐信
2013/10/30 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
承租经营合作者协议书
2014/10/01 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
简爱读书笔记
2015/06/26 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
Redis 限流器
2022/05/15 Redis