<!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. HDU 1005 Number Sequence（数列）

    HDU 1005 Number Sequence(数列) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...

  2. 《易货》Alpha版本项目展示

    一.团队成员和个人博客地址 PM:董元财 开发人员:胡亚坤,董元财,刘猛 测试人员:益西多吉,马汉虎 团队名:bestRW 团队博客地址:http://www.cnblogs.com/niceRW/ ...

  3. 关于Java控制台输入输出乱码问题

    产生原因:因为这个开源项目的默认字符编码为UTF-8,所以我的控制台的字符编码也自动变成了UTF-8,而键盘的输入流的默认格式是GBK格式,这样就造成了在GBK转UTF-8的过程中产生的奇数乱码错误( ...

  4. mysql 2003 10038 连接不上的解决

    网上写的很复杂,其实解决办法是 你在右键管理员权限下运行 mysqld. 忘记这个了,害的又找了近1个小时的时间找问题.

  5. 学习笔记day5：inline inline-block block区别

    1. block元素可以包含block元素和inline元素:但inline元素只能包含inline元素.要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条 ...

  6. js的小随笔

    1.在js中{  }中的块级语句没有独立的作用域 var i = 5;for(; i < 8; i++){ console.log(i); } //输出 5 6 7 //全局设置的变量i在for ...

  7. hdu 1142 用优先队列实现Dijkstra

    之前很认真地看了用优先队列来实现Dijkstra这块,借鉴了小白书上的代码模板后,便拿这道题来试试水了.这道题的大意就是问你从地点1到地点2有多少条满足条件的路径(假设该路径经过 1->...- ...

  8. CodeForces 185A 快速幂

    一开始找矩阵快速幂的题来做时就看到了这题,题意就是让你求出如图所示的第n个三角形中指向向上的小三角形个数.从图中已经很容易看出递推关系了,我们以f[n]表示第n个大三角形中upward的小三角形个数, ...

  9. Android 数据库升级解决方案

    转自:http://blog.csdn.net/leehong2005/article/details/9128501 请考虑如下情况: 在数据库升级时,不同版本的数据库,他们定义的表结构完全可能是不 ...

  10. Maven——使用Maven构建多模块项目

    原文:http://www.cnblogs.com/xdp-gacl/p/4242221.html 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为doma ...