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>
相关推荐
-
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操作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实现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实现表格行上下移动和置顶效果
我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <
-
基于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实现列表上下移动功能
废话少说,我们开始进入主题. 今天我们实现的是一个列表页面上移.下移功能.如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移. html代码如下: <div> <input type="button" onclick="up();" value=" 上移 "> <input type="button" onclick="down();" value="
-
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的实现【示例代码】
本例子实现弹窗的效果: 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中自带的统计函数 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 <
随机推荐
- 按键精灵应用手记
- 用vbs实现配置静态 IP 地址
- 正则表达式的多行模式与单行模式图文分析
- 基于多线程中join()的用法实例讲解
- Java中常用的数据库连接池_动力节点Java学院整理
- java模拟http的Get/Post请求,并设置ip与port代理的方法
- javascript的tab切换原理与效果实现方法
- php+mysqli实现批量替换数据库表前缀的方法
- Android客户端实现图片轮播控件
- JS图片无缝滚动(简单利于使用)
- javascript 二分法(数组array)
- Smarty结合Ajax实现无刷新留言本实例
- 解析取模运算% 和位与运算& 之间的关系详解
- 深入理解JavaScript系列(43):设计模式之状态模式详解
- N点主机管理系统重置密码方法(在线修改密码)
- 制作符合用户体验的漂亮的input输入框
- C#生成唯一值的方法汇总
- WinRAR 任务计划 免费定时备份
- 基于MVC5中的Model层开发数据注解
- 利用注解配置Spring容器的方法