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+FSO遍历文件夹下文件并显示
Mar 07 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python将字符串转换成数组的方法
2015/04/29 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
行政人员岗位职责
2013/12/08 职场文书
信息技术培训感言
2014/03/06 职场文书
电焊工岗位职责
2014/03/06 职场文书
民事二审代理词
2015/05/25 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python