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 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
js实现汉字排序的方法
Jul 23 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
在vue中使用Echarts画曲线图的示例
Oct 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php生成图片验证码的方法
2016/04/15 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python三元运算实现方法
2015/01/12 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python中的函数作用域
2018/05/07 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
铣工实训报告
2014/11/05 职场文书
详解Nginx 工作原理
2021/03/31 Servers
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android