<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
分享到：
相关推荐
基于JQuery的操作表格附源码，实现html中table的tr的添加、删除以及上下移动。
用js实现 表格行的表格，上移 ，下移，置顶，置底操作 直接引入js 快捷方便 支持ctrl键同时选择多行操作 支持选中行改变样式 支持行号显示 支持未选择行时移动提示
jquery做的table行上下移动，互换,简单有效，非常的实用
运用jquery技术来实现table元素的tr内容的上下移动,从而改变用户调整的顺序.研究的源代码实例共享给大家,希望能够帮助到你.
主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
本文实例讲述了JS实现表格行上下移动操作的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
<table align="表格对齐方式center/right/left" border="表格边框 默认没有边框" cellpadding="文字和单元格之间边距 默认为1" cellspacing="单元格和单元格之间间距 默认为2" width="表格宽度" height="表格高度"> ...
”body_div”> <table id=”tab”> <tr xss=removed> 工号</th> 姓名</th> 年龄</th> 性别</th> </tr> <tr> <td>2014010101</td> 张峰</td> <td>56</td> 男</td> </tr> <tr> <td>2014010102</td> 李玉<
表格样式 <table> <tr> <td><input type=button value=上移 onclick=moveUp(this)/> <td><input type=button value=下移 onclick=moveDown(this)/> </tr> <tr> <td><input type=button value=...
1.鼠标移动行变色 代码如下:$(‘#table1 tr’).hover(function(){ $(this).children(‘td’).addClass(‘hover’)}, function(){ $(this).children(‘td’).removeClass(‘hover’)});方法二： 代码如下:$(“#...
<... <head> <... <tr><td>bayern1</td><td>bayern2</td><td>bayern3</td><td>bayern4</td><td>bayern5</td><td>bayern6</td></tr> </table> </div> </body> </html>
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，...
具体代码如下所示： <table> <tr v-for=item value=item.value key=item> {{item.id}} (item.id) mouseout=mouseoutHander(item.id)> {{item.name.substr(0, 8)}} </templ
话不多说，跟这小编来一起看下吧 1、CSS <style type="text/css"> #scroll_head { position: absolute; display: none;... //该函数在上面一个table数据... var b = $('#data_tbody').prev().find('tr:last').fi
只需要在table标签上使用.table类，就可以使用bootstrap默认的表格样式 如果需要行背景有交替变化，可以这样设定： 复制代码 代码如下: <table class=”table> 如果需要边框，可以这样设定： 复制代码 代码如下: ...
1.2 在上移和下移以后，我们将移动以后的两行的id和datagrid-row-index属性也必须互换，这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行，=1的是第二行等等。将来保存的时候，就是通过取这个属性值...
表格行移动器 - jQuery 插件 演示： : 您可以将 <tr> 或 <tbody> 向上、向下、顶部、底部移动。 用法 $ ( '#sample-table' ) . tableRowMover ( { rowTagName : 'tbody' } , function ( $row ) { $row . css ( ...
react_smart_table 使用react在数据表等数据网格上进行实验工作 -故事- 渲染表<table> 从数据推断列 渲染标题<tr> <th>... ...行是可移动的（很漂亮吗？） 数据可分页 细胞可以具有刚体，可以处理物理学中的独角兽
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件...
Bootstrap – 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。下面给大家介绍Bootstrap表格的使用，一起学习吧。 先定义前端table <table class=table id=expandabledatatable></table> ...