<!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. 【面向打野编程】——KMP算法入门

    一.问题 咱们先不管什么KMP,来看看怎么匹配两个字符串. 问题:给定两个字符串,求第二个字符串是否包含于第一个字符串中. 为了具体化,我们以 ABCAXABCABCABX 与 ABCABCABX为例 ...

  2. FZU 2221 RunningMan（跑男）

    Problem Description 题目描述 ZB loves watching RunningMan! There's a game in RunningMan called 100 vs 10 ...

  3. h5移动开发css

    最近刚开始做移动端的开发,接触到很多新的东西,很荣幸(*^__^*) , 下面我们开始正式介绍最近新接触到的属性啦,一起进步: 1.点击按钮等会产生阴影,可设置这个属性:-webkit-tap-hig ...

  4. canvas背景透明

    var can=document.getElementById("canv"); c=can.getContext("2d"); c.globalAlpha=. ...

  5. LINQ之路 3：C# 3.0的语言功能（下）

    在LINQ介绍一篇中,我们已经看到了隐式类型变量var,扩展方法(Extension method)和Lambda表达式的身影.没错,他们正是LINQ技术的基石,是他们让LINQ的实现成为可能,并且简 ...

  6. iOS - OC 面向对象语法

    1.类 1)根类:因为类 NSObject 是层次结构的最顶层,因此称为根类. 可以将类称为子类(subclass)和父类(superclass),也可以将类称为子类和超类. 2)分类/类别(cate ...

  7. iOS - UIKit

    1.UIKit 框架基本结构 1)控件 屏幕上的所有 UI 元素都叫做控件(也有叫做视图.组件),比如按钮(UIButton).文本(UILabel)都是控件. 为了便于开发者打造各式各样的优秀 Ap ...

  8. DBCP、C3P0、Proxool 、 BoneCP开源连接池的比《转》

     简介   使用评价  项目主页  DBCP DBCP是一个依赖Jakarta commons-pool对象池机制的数据库连接池.DBCP可以直接的在应用程序用使用 可以设置最大和最小连接,连接等待时 ...

  9. Oracle 逐条和批量插入数据方式对比

    创建测试表 create table base_users ( userid         varchar2(16), username  varchar2(32), passwd      var ...

  10. RedHat 7配置yum源

    卸载自带的yum软件包 rpm -e yum-utils--.el7.noarch --nodeps rpm -e yum-rhn-plugin--.el7.noarch --nodeps rpm - ...