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

 让tr元素的上下移动的方法有很多,本文为大家介绍下使用jquery是实现的,感兴趣的朋友可以参考下

代码如下:
<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> 
 

时间: 2024-09-11 08:40:42

jquery实现tr元素的上下移动示例代码的相关文章

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

 本篇文章主要是对jquery判断元素的子元素是否存在的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery判断子元素是否存在      一.判断子元素是否存在    //一级子元素 if($("#specialId>img").length==0)      if ($( "#specialId:has(img)" ).length==0)           {       //-----没有img子标记-----      }

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

 本篇文章主要是对jquery取消选择select下拉框示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有三个select下拉框 一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项 这需求有点儿..........   下面是三个select:   代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">

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

本例子实现弹窗的效果: 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(三)jquery动态创建元素和常用函数示例 .

在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些头晕的API 主要讲解动态创建元素操作jQuery包装集的各个函数 一.动态创建元素 (这块转至网络,具体地址不详,以前找到的资料)) 1.错误的编程方法 我们经常使用javascript动态的创建元素, 有很多程序员通过直接更改某一个容器的HTML内容.比如: [html] view plainc

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

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

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

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

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

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

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

本文为大家详细介绍下通过jquery获取表单元素CheckBox.Radio等的值,有需求的朋友可以参考下,希望对大家有所帮助   jquery 笔记: 复制代码 代码如下: $("input[name='radio_name']:checked").val() <input type="radio" value="1" name="radio_name" />1 <input type="radi

jquery 获取表单元素里面的值示例代码_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 <