<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>
相关推荐
本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...
本文将深入探讨如何使用jQuery来实现表格行(tr)的添加、删除和上下移动,同时提供相关源码供参考。 一、jQuery基本操作 在开始之前,我们需要确保已引入jQuery库。通常在HTML文件头部通过`<script>`标签引入...
本文将深入探讨如何使用JavaScript实现表格行的上下移动、置顶和置底功能,以及相关辅助操作。 首先,`js操作table行的上下移动,置顶置底`这个主题涉及到的主要技术是DOM操作,事件监听和数组处理。DOM(Document ...
`updateNums`函数负责更新所有tr的序号,确保在tr移动后,序号仍然正确。 通过这样的实现,用户可以通过点击上下箭头按钮轻松地调整表格中的行顺序,而无需刷新页面,且序号会随着行的移动自动调整,提供了良好的...
标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM(Document Object Model)元素,特别是HTML表格的行(tr)进行上下移动的功能。这种功能常见于数据管理界面,允许用户通过交互调整...
总结来说,"HTML Table表格编辑器"是一款提高HTML表格操作效率的工具,它通过JavaScript实现了行的移动和单元格的编辑功能,为网页开发者和内容创作者提供了更为便利的工作环境。用户可以通过`index.htm`文件查看并...
在本教程中,我们将深入探讨如何利用jQuery技术实现表格(table)元素的上下移动,以此来改变表格行(tr)的顺序,以满足用户自定义排序的需求。 首先,我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...
标题提到的“jquery做的table行上下移动,互换”是jQuery实现的一种常见功能,通常用于数据表的排序和编辑。这个功能允许用户通过点击按钮或者直接拖拽来改变表格行的顺序,提高交互性和用户体验。 首先,我们需要...
为了实现这样的功能,开发者需要具备HTML结构知识,理解表格(`<table>`、`<tr>`、`<td>`等标签)以及CSS样式,同时还需要熟练掌握jQuery提供的各种API。在测试和调试过程中,开发者可能利用浏览器的开发者工具来...
综上所述,创建“漂亮的table表格样式”涉及多个CSS属性的运用,包括颜色、边框、背景、悬停效果以及过渡动画。通过合理组合这些元素,我们可以制作出既美观又实用的HTML表格,提升网页的整体视觉体验。
本知识点主要探讨如何使用jQuery实现表格(table)中行的上下移动互换功能。这一功能常用于数据管理界面,允许用户通过交互调整数据顺序。 首先,你需要确保已经下载并引入了jQuery库。通常,可以通过在HTML文件中...
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...
为了实现使用键盘上下键移动选择表格行的功能,我们需要编写JavaScript代码来绑定键盘事件,并在事件触发时更新表格行的选择状态。接下来,我将详细说明涉及的关键知识点和技术细节。 1. **HTML表格(table)的结构...
HTML中的`<table>`元素是创建表格的基本标签,`<tr>`表示表格行,`<td>`则表示单元格。在JavaScript中,我们可以通过DOM(Document Object Model)接口来操作这些元素。 在JavaScript中实现表格行的上下移动,主要...
本文将详细介绍如何使用JavaScript实现表格行的上下移动、置顶和置底功能,并支持Ctrl多选、选中行样式改变以及行号显示等实用特性。 首先,我们需要创建一个HTML表格元素,包含若干行(tr)和单元格(td)。例如:...
本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中,通过拖动表头来任意调整列宽度的功能,这个功能适用于各种列表页面,如数据展示、报表分析等场景。 首先,我们需要引入jQuery库,它是...
**jQuery UI 拖拽信息到Table表格特效详解** 在网页开发中,用户交互体验是至关重要的,而jQuery UI库提供了丰富的组件和效果,其中拖放功能(Drag and Drop)可以显著提升用户的操作便捷性。本篇文章将详细介绍...