`
落叶换新叶
  • 浏览: 25285 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

table表格tr上下移动

阅读更多
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="jquery-1.8.3.min.js"></script>


<script type="text/javascript">	
	
	function move(_this,operation,_val) {
	    var data_tr=$(_this).parent().parent(); 
        if(operation=="MoveUp"){    
            var prevTr = $(data_tr).prev();
            if(prevTr.prev().html()==null) {
			  $(_this).hide();
            } 
            if($("#down_"+_val).is(":hidden")){  
                 $("#down_"+_val).removeAttr("style");				
            }
            
            var currentTd = $(data_tr).children('td').eq(0);
            var currentTdVal = currentTd.html();
            var prevTd = $(data_tr).prev().children('td').eq(0);
            var prevTdVal = prevTd.html();
            currentTd.html(prevTdVal);
            prevTd.html(currentTdVal);
            
			var prevTr = $(data_tr).prev();
			
            $(data_tr).insertBefore($(data_tr).prev()); 
			if($(prevTr).next().html()==null) {
			   var hrefTd = $(prevTr).children('td').eq(5);
			      $(hrefTd).children('a').eq(1).hide();	
				  $(hrefTd).children('a').eq(0).show();		   		   
			}else {
			   $(prevTr).children('td').eq(5).children('a').eq(0).show();
			}            
         }else{
            var nextTr = $(data_tr).next();
            if(nextTr.next().html()==null) {
               $(_this).hide();
            }
            if($("#up_"+_val).is(":hidden")){
                $("#up_"+_val).removeAttr("style");    
            }
           
            var currentTd = $(data_tr).children('td').eq(0);
            var currentTdVal = currentTd.html();
            var nextTd = $(data_tr).next().children('td').eq(0);
            var nextTdVal = nextTd.html();
            currentTd.html(nextTdVal);
            nextTd.html(currentTdVal);
            
			var nextTr = $(data_tr).next();			
            $(data_tr).insertAfter($(data_tr).next()); 
			
			if($(nextTr).prev().html()==null) {
			   var hrefTd = $(nextTr).children('td').eq(5);
			      $(hrefTd).children('a').eq(0).hide();	
				  $(hrefTd).children('a').eq(1).show();
			  // }			   		   
			}else {
			   $(nextTr).children('td').eq(5).children('a').eq(1).show(1);
			}
         }
	}
	
	function toUpdateHandBook(handBookId,source){
   		location.href="toUpdateHandBook.do?handBookId="+handBookId+"&source="+source;
   	}

</script>

<body bgcolor="#EBEEF7" onkeydown="checkKey(event)">

	<form name="firstCategoryDetailForm" action="orgManage.do" method="post">
		<TABLE border=0 cellSpacing=0 cellPadding=0 width="95%"
			style="padding-left: 5px; padding-right: 2px;">

			<TBODY>
				
				
				
				<TR>
					<TD>
						<TABLE class=table_1 border=0 cellSpacing=0 cellPadding=4
							align="center" width="95%">
								<TR class=fieldName align=middle>
									<TD class=td_1 height=17 width="10%" scope=col align=middle>排序</TD>
									<TD class=td_1 height=17 width="20%" scope=col align=middle>二级分类</TD>
									<TD class=td_1 height=17 width="15%" scope=col align=middle>适用平台</TD>
									<TD class=td_1 height=17 width="20%" scope=col align=middle>最新内容</TD>
									<TD class=td_1 height=17 width="15%" scope=col align=middle>最新修改时间</TD>
									<TD class=td_1 scope=col align=middle>
										
										操作
									</TD>
								</TR>
							<TBODY>
								
										<TR class=fieldContentText >
											<TD class=td_3 align="center">1</TD>
											<TD class=td_3 align="center">企业服务手册</TD>
											<TD class=td_3 align="center">APP</TD>
											<TD class=td_3 align="center">最新内容1</TD>
											<TD class=td_3 align="center"></TD>
											<TD class=td_3 align="center">
											   												    
														<a id="up_1" href="#" onclick="move(this,'MoveUp',1)">上移</a>													
											    
											    												
														<a id="down_1" href="#" onclick="move(this,'MoveDown',1)">下移</a>
											    
												<a href="#">内容管理</a>
												<a href="#">删除</a>
											</TD>
										</TR>
										
										<TR class=fieldContentText >
											<TD class=td_3 align="center">2</TD>
											<TD class=td_3 align="center">企业服务手册aa</TD>
											<TD class=td_3 align="center">APP</TD>
											<TD class=td_3 align="center">最新内容2</TD>
											<TD class=td_3 align="center"></TD>
											<TD class=td_3 align="center">
											    												    
														<a id="up_2" href="#" onclick="move(this,'MoveUp',2)">上移</a>													
											    
											   												
														<a id="down_2" href="#" onclick="move(this,'MoveDown',2)">下移</a>
											    
												<a href="#">内容管理</a>
												<a href="#">删除</a>
											</TD>
										</TR>
										<TR class=fieldContentText >
											<TD class=td_3 align="center">3</TD>
											<TD class=td_3 align="center">企业服务手册bb</TD>
											<TD class=td_3 align="center">APP</TD>
											<TD class=td_3 align="center">最新内容3</TD>
											<TD class=td_3 align="center"></TD>
											<TD class=td_3 align="center">
											    												    
														<a id="up_3" href="#" onclick="move(this,'MoveUp',3)">上移</a>													
											    
											   												
														<a id="down_3" href="#" onclick="move(this,'MoveDown',3)">下移</a>
											    
												<a href="#">内容管理</a>
												<a href="#">删除</a>
											</TD>
										</TR>
							</TBODY>
						</TABLE>

					</TD>
				</TR>
			</TBODY>
		</TABLE>

	</form>

</body>

 

  • 大小: 7.8 KB
0
0
分享到:
评论

相关推荐

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

    本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...

    JQuery操作表格(附源码)实现tr上下移动。

    本文将深入探讨如何使用jQuery来实现表格行(tr)的添加、删除和上下移动,同时提供相关源码供参考。 一、jQuery基本操作 在开始之前,我们需要确保已引入jQuery库。通常在HTML文件头部通过`&lt;script&gt;`标签引入...

    js操作table行的上下移动,置顶置底

    本文将深入探讨如何使用JavaScript实现表格行的上下移动、置顶和置底功能,以及相关辅助操作。 首先,`js操作table行的上下移动,置顶置底`这个主题涉及到的主要技术是DOM操作,事件监听和数组处理。DOM(Document ...

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

    `updateNums`函数负责更新所有tr的序号,确保在tr移动后,序号仍然正确。 通过这样的实现,用户可以通过点击上下箭头按钮轻松地调整表格中的行顺序,而无需刷新页面,且序号会随着行的移动自动调整,提供了良好的...

    JS控制HTMLDOM表格行上下移动

    标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM(Document Object Model)元素,特别是HTML表格的行(tr)进行上下移动的功能。这种功能常见于数据管理界面,允许用户通过交互调整...

    HTML table表格编辑器

    总结来说,"HTML Table表格编辑器"是一款提高HTML表格操作效率的工具,它通过JavaScript实现了行的移动和单元格的编辑功能,为网页开发者和内容创作者提供了更为便利的工作环境。用户可以通过`index.htm`文件查看并...

    运用jquery技术实现表格元素的上下移动

    在本教程中,我们将深入探讨如何利用jQuery技术实现表格(table)元素的上下移动,以此来改变表格行(tr)的顺序,以满足用户自定义排序的需求。 首先,我们需要理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素...

    jquery做的table行上下移动,互换

    标题提到的“jquery做的table行上下移动,互换”是jQuery实现的一种常见功能,通常用于数据表的排序和编辑。这个功能允许用户通过点击按钮或者直接拖拽来改变表格行的顺序,提高交互性和用户体验。 首先,我们需要...

    jquery实现的可增加,删除行,可多行上下移动表格

    为了实现这样的功能,开发者需要具备HTML结构知识,理解表格(`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等标签)以及CSS样式,同时还需要熟练掌握jQuery提供的各种API。在测试和调试过程中,开发者可能利用浏览器的开发者工具来...

    漂亮的table表格样式

    综上所述,创建“漂亮的table表格样式”涉及多个CSS属性的运用,包括颜色、边框、背景、悬停效果以及过渡动画。通过合理组合这些元素,我们可以制作出既美观又实用的HTML表格,提升网页的整体视觉体验。

    jquery table 上下行移动互换

    本知识点主要探讨如何使用jQuery实现表格(table)中行的上下移动互换功能。这一功能常用于数据管理界面,允许用户通过交互调整数据顺序。 首先,你需要确保已经下载并引入了jQuery库。通常,可以通过在HTML文件中...

    键盘上下键移动选择table表格行的js代码

    为了实现使用键盘上下键移动选择表格行的功能,我们需要编写JavaScript代码来绑定键盘事件,并在事件触发时更新表格行的选择状态。接下来,我将详细说明涉及的关键知识点和技术细节。 1. **HTML表格(table)的结构...

    javaScript+html实现表格上下移动.zip

    HTML中的`&lt;table&gt;`元素是创建表格的基本标签,`&lt;tr&gt;`表示表格行,`&lt;td&gt;`则表示单元格。在JavaScript中,我们可以通过DOM(Document Object Model)接口来操作这些元素。 在JavaScript中实现表格行的上下移动,主要...

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...

    js table行的上下移动,置顶置底,支持ctrl多选

    本文将详细介绍如何使用JavaScript实现表格行的上下移动、置顶和置底功能,并支持Ctrl多选、选中行样式改变以及行号显示等实用特性。 首先,我们需要创建一个HTML表格元素,包含若干行(tr)和单元格(td)。例如:...

    jQuery UI拖拽信息到Table表格特效

    **jQuery UI 拖拽信息到Table表格特效详解** 在网页开发中,用户交互体验是至关重要的,而jQuery UI库提供了丰富的组件和效果,其中拖放功能(Drag and Drop)可以显著提升用户的操作便捷性。本篇文章将详细介绍...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    在本文中,我们将深入探讨...通过结合JavaScript和CSS,我们可以创建出直观且易于使用的用户界面,让用户能够方便地将div中的数据移动到表格中。这种技术在数据管理、任务列表、日历应用等多个场景中都有广泛的应用。

    layui的表格table选中数据后更改本行的颜色

    它提供了丰富的组件,其中包括表格(table)组件,可以方便地实现数据展示、操作和交互。在实际应用中,我们经常需要根据用户的选择状态来改变表格的视觉效果,比如选中某行后改变其颜色,以突出显示。下面将详细...

Global site tag (gtag.js) - Google Analytics