jquery实现tr元素的上下移动示例代码

代码如下:

<html>
<head>
<title></title>
<style type="text/css" >
table { background:#949494; width:400px; line-height:20px;}
td { border-right:1px solid gray; border-bottom:1px solid gray; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
function up(obj) {
var objParentTR = $(obj).parent().parent();
var prevTR = objParentTR.prev();
if (prevTR.length > 0) {
prevTR.insertAfter(objParentTR);
}
}
function down(obj) {
var objParentTR = $(obj).parent().parent();
var nextTR = objParentTR.next();
if (nextTR.length > 0) {
nextTR.insertBefore(objParentTR);
}
}
</script>
</head>
<body>
<table border="0" >
<tr><td>1</td><td>12</td><td>13</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
<tr><td>2</td><td>22</td><td>23</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
<tr><td>3</td><td>32</td><td>33</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
<tr><td>4</td><td>42</td><td>43</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
<tr><td>5</td><td>52</td><td>53</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
</table>
</body>
</html>

赞 (0)

相关推荐

  • jQuery实现表格行上下移动和置顶效果

    我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <

  • Jquery实现Div上下移动示例

    复制代码 代码如下: $(this).ready(function() { $(".up").each(function() { $(this).click(function() { var $tr = $(this).parents("li"); if ($tr.index() != 0) { $tr.prev().before($tr); } }); }); var trLength = $(".down").length; $("

  • jQuery操作Select的Option上下移动及移除添加等等

    复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**

  • jquery实现列表上下移动功能

    jquery实现列表上下移动功能

    废话少说,我们开始进入主题. 今天我们实现的是一个列表页面上移.下移功能.如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移. html代码如下: <div> <input type="button" onclick="up();" value=" 上移 "> <input type="button" onclick="down();" value="

  • Jquery实现上下移动和排序代码

    Jquery实现上下移动和排序代码

    提出问题: 下文为大家介绍下Jquery实现上下移动和排序,感兴趣的朋友可以了解一下. 解决问题 代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

  • 基于jQuery实现文本框缩放以及上下移动功能

    想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧. jQuery代码: 复制代码 代码如下: $(function(){           var $comment = $('#comment');           $('.bigger').click(function(){               if(!$comment.is(":animated")){                   if($comment.height() &

  • jQuery实现table中的tr上下移动并保持序号不变的实例代码

    jQueryMoveTr.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></sc

  • jquery实现tr元素的上下移动示例代码

    复制代码 代码如下: <html> <head> <title></title> <style type="text/css" > table { background:#949494; width:400px; line-height:20px;} td { border-right:1px solid gray; border-bottom:1px solid gray; } </style> <scri

  • jQuery使用jsonp实现百度搜索的示例代码

    项目实现:还原百度搜索功能: 项目原理:利用json回调页面传参; 什么是jsonp:就是利用<script>标签的src地址,让目标页面回调本地页面,并且带入参数,也解决了跨域问题: 代码如下: html(css代码不提供) <div class="box"> <input type="text" /> <div class="ssk"></div> <button>×&l

  • jquery自定义插件——window的实现【示例代码】

    jquery自定义插件——window的实现【示例代码】

    本例子实现弹窗的效果: 1.jquery.show.js /* * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var close, title, content; close=$(" "); title=$

  • jquery操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <html> <head> <title></title> <!--添加jquery--> <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript

  • Matlab实现统计集合中各元素出现次数的示例代码

    Matlab实现统计集合中各元素出现次数的示例代码

    目录 前言 工具函数类 使用方式 统计数字 统计单词.名称 统计字符 完整代码 前言 统计数组中各个元素数量是一个很常用的功能,但我试着用了MATLAB中自带的统计函数 tabulate: 但是发现了两个问题: 当元素中英文混杂时: X = {'slandarer';'slandarer';'hikari';'hikari';'公众号';'公众号'; 'CSDN';'CSDN';'CSDN'}; tabulate(X) 我们发现中英文混杂时输出会对不齐: 当元素为纯整数数值时: X=[6,5,6

  • jquery判断元素的子元素是否存在的示例代码

    jquery判断子元素是否存在 一.判断子元素是否存在   //一级子元素 if($("#specialId>img").length==0)     if ($( "#specialId:has(img)" ).length==0)          {      //-----没有img子标记-----     }    else     {      //-------有img子标记------     } 二.选择特定id元素下的特定id子元素   

  • 利用jQuery+localStorage实现一个简易的计时器示例代码

    前言 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 本文主要介绍了关于jQuery+localStorage实现简易计时器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 原型 需求 1.关闭浏览器时时间继续运行 2.刷

  • jquery取消选择select下拉框示例代码

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">        <option value="">全部</option>   

  • Jquery在指定DIV加载HTML示例代码

    首先引入Jquery 复制代码 代码如下: <script src="js/jquery.js"></script> 在页面加入JS 复制代码 代码如下: <script> $(function(){ $("div#top_sidebar").load("top_sidebar.html"); }) </script> #top_sidebar 为指定DIV的ID

  • jquery 获取表单元素里面的值示例代码

    jquery 笔记: 复制代码 代码如下: $("input[name='radio_name']:checked").val() <input type="radio" value="1" name="radio_name" />1 <input type="radio" value="2" name="radio_name" />2 <

随机推荐