<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格数据上下行互换位置</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//上移
$("input.upbtn").each(function () {
$(this).click(function () {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.prev().before($tr);
}
});
});
//下移
var trLength = $("input.downbtn").length;
$("input.downbtn").each(function () {
$(this).click(function () {
var $tr = $(this).parents("tr");
if ($tr.index() != trLength - 1) {
$tr.next().after($tr);
}
});
});
});

</script>
</head>
<body>
<table border="1" cellpadding=0 cellspacing=0>
<tr>
<td>4</td>
<td>xxx44xxxx</td>
<td>2013-5-24</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>5</td>
<td>xxxx55xxx</td>
<td>2013-5-25</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>6</td>
<td>xxxx66xxx</td>
<td>2013-5-26</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>7</td>
<td>xxxx77xxx</td>
<td>2013-5-27</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>8</td>
<td>xxx88xxxx</td>
<td>2013-5-28</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
</table>
</body>
</html>

jquery 行交换 上移 下移的更多相关文章

  1. 排序功能实现 jQuery实现排序 上移 下移

    效果 思路, 跟相邻元素,互换sort. 前提是每一个元素都有自己的sort值,不为零. <tr id="{sh:$vo.id}"> <td> <sp ...

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

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  3. jquery easyui datagrid实现单行的上移下移，以及保存移动的结果

    1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-in ...

  4. JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 05_jquery 操作table使tr(数据)整行上移下移

    1:ajax请求数据到页面 function GetWorkSpaceList() { GetServerData("get", GetEnterpriseUrl() + &quo ...

  6. jqgrid 上移下移单元格

    在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序 1.上移,下移按钮 <a href="javascript ...

  7. codeforces 724B Batch Sort(暴力-列交换一次每行交换一次)

    题目链接:http://codeforces.com/problemset/problem/724/B 题目大意: 给出N*M矩阵,对于该矩阵有两种操作: (保证,每行输入的数是 1-m 之间的数且不 ...

  8. php修改排序，上移下移

    php修改排序,上移下移 /**    $UpDown //移动方向,up或down    $table //表名    $id //当前移动的ID    $id_col //ID字段的名称    $ ...

  9. table中实现数据上移下移效果

    html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...

随机推荐

  1. 用@RequestMapping映射请求

    DispatcherServlet接受一个web请求之后,将请求发送给@Controller注解声明的不同控制器类. 这个调度过程依赖控制器类及其处理程序方法中声明的各种@RequestMapping ...

  2. eclipse格式化代码

    在Eclipse下安装.使用Jalopy方法 http://hi.baidu.com/zdz8207/item/c2972e172ad3efdcbf9042d6 http://www.cnblogs. ...

  3. 一切都是对象 Thinking in Java 第二章

    2.1 用引用操作对象 1.对象和引用联系起来,就可以通过引用来操作对象: 2.引用亦可单独存在,即没有和任何对象联系起来:对没有和对象联系起来的引用操作,会报错: 2.2 必须由你创建所有对象 1. ...

  4. [转载] MySQL高可用方案选型参考

    原文: http://imysql.com/2015/09/14/solutions-of-mysql-ha.shtml?hmsr=toutiao.io&utm_medium=toutiao. ...

  5. epoll函数与参数总结学习 & errno的线程安全

    select/poll被监视的文件描述符数目非常大时要O(n)效率很低:epoll与旧的 select 和 poll 系统调用完成操作所需 O(n) 不同, epoll能在O(1)时间内完成操作,所以 ...

  6. Erlang安装笔记

    今天,为了安装RabbitMQ,需要安装Erlang,中间遇到了一些坑,记录下来. 1. 下载Erlang安装包 http://www.erlang.org/downloads http://erla ...

  7. Android LayoutInflater深度解析 给你带来全新的认识

      转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38171465 , 本文出自:http://blog.csdn.net/lmj ...

  8. Mybatis 的分页插件PageHelper-4.1.1的使用

    Mybatis 的分页插件 PageHelper 项目地址:http://git.oschina.net/free/Mybatis_PageHelper  文档地址:http://git.oschin ...

  9. JQuery基础汇总

    1. 对象获取与赋值::$("#obj").val("Hello World!"); 2. 对象的显示与隐藏:$("#obj").show( ...

  10. BOM头的来源

    类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别 ...