table 的tr做上移下移之后如何提交移动后的数据顺序到后台

青鸟Will 2017-08-29 05:30:19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">


$(function(){
$('span').mouseover(function(){ //鼠标移动到span上
$(this).addClass('selected'); //高亮
}).mouseout(function(){ //鼠标移出span
$(this).removeClass('selected'); //取消高亮
});
$('span').click(function(){ //鼠标点击span
var spanHTML = $(this).html(); //获得向上或向下箭头
var $tr = $('.selected').parent().parent(); //获得当前那一行
var childCount = $tr.children().length; //获得tr的子节点数
var arrChild = new Array(childCount-2); //
for(var i=1;i<childCount-2;i++){
arrChild[i] = $tr.children()[i].innerHTML;
}

var $oTr;
if(spanHTML == "A"){
$oTr = $tr.prev(); //获得上一个tr
}else{
$oTr = $tr.next(); //获得下一个tr
}
if(typeof($oTr.children()[0]) != 'undefined'){
for(var i=1; i<childCount-2; i++){
$tr.children()[i].innerHTML = $oTr.children()[i].innerHTML;
$oTr.children()[i].innerHTML = arrChild[i];
}
}
});
})
</script>
</head>
<body>
<form id="dataForm">
<table id="changeRow" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div><input value="11  "></input></div>
<div><input value="110  "></div>
</td>
<td>
<div><input value="12  "></input></div>
<div><input value="120  "></input></div>
</td>
<td>
<div><input value="13  "></input></div>
<div><input value="130  "></input></div>
</td>
<td>  <span>A</span></td>
<td>  <span>B</span></td>

</tr>
<tr>
<td>
<div><input value="21  "></input></div>
<div><input value="210  "></input></div>
</td>
<td>
<div><input value="22  "></input></div>
<div><input value="220  "></input></div>
</td>
<td>
<div><input value="23  "></input></div>
<div><input value="230  "></input></div>
</td>
<td>  <span>A</span></td>
<td>  <span>B</span></td>
</tr>
<tr>
<td>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>31  </option>
</select>
</div>
<div>310  </div>
</td>
<td>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>32  </option>
</select>
</div>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>320  </option>
</select>
</div>
</td>
<td>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>33  </option>
<option>33  </option>
<option>33  </option>
<option>33  </option>
</select>
</div>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>330  </option>
<option>330  </option>
<option>330  </option>
<option>330  </option>
</select>
</div>
</td>
<td>  <span>A</span></td>
<td>  <span>B</span></td>
</tr>
<tr>
<td>
<div>41  </div>
<div>410  </div>
</td>
<td>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>42  </option>
<option>42  </option>
<option>42  </option>
<option>42  </option>
</select>
</div>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>420  </option>
<option>420  </option>
<option>420  </option>
<option>420  </option>

</select>
</div>
</td>
<td>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>43  </option>
<option>43  </option>
<option>43  </option>
<option>43  </option>
</select>
</div>
<div>
<select class="easyui-combobox" name="OpertorName13" style="width:50%;" panelHeight="100px">
<option>430  </option>
<option>430  </option>
<option>430  </option>
<option>430  </option>
</select>
</div>
</td>
<td>  <span>A</span></td>
<td>  <span>B</span></td>
</tr>

</table>
</form>
</body>
</html>
移动后通过表单提交，顺序还是移动前的顺序，怎么才能提交移动后顺序
...全文
307 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_39237181 2017-08-30
  • 打赏
  • 举报
 回复
只能添加个字段存放table索引值到数据库 提交后将当前索引对应ID保存到数据库
青鸟Will 2017-08-29
  • 打赏
  • 举报
 回复
这种移动方式是不是都是只局限页面展示的改变，为什么保存之后还是原来的数据呢
cms-cloud后台管理系统
cms-Cloud后台管理系统   cms-Cloud 基于Spring Boot、Spring Cloud & Alibaba、OAuth2的前后端分离的后台管理系统，内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理...
Layui选择单选框实现table行上下移动，并实现数据的排序
描述 由于表格是layui的方法渲染完成的，所以使用js无法获取到某个表格的tr（等待方法），只能使用layui的方法table.cache.testReload（testReload为table.render中的id）； 在仅仅进行上下移动表格行后，layui无法获取到调整顺序后的表格数据； so，在上下移动的时候就可以把表格数据进行交换（比如：上移某行时，把这行数据和他上一行的数据交换）...
layui加JQuery实现上移下移，上移到顶，下移到底
思路：是将查出来的数据重新排序（主要是唯一ID及其数据位置调整）后台设置序号。只支持单选代码如何： 第一步 var data_tr; //触发单选框选择 table.on(‘radio()’, function(obj){ //test 是 table 标签对应的 lay-filter 属性 data_tr = $(this); }); // 上移 function uptr() { // 拿到列表集合 var datas = layui.table.cache[“list”]; // 拿到选中的数据 va
element ui table表格实现tr行上下移动，并且改变序号顺序
改变序号的前提是序号后台数据里定义的，未定义的不用管序号调整问题。 上移代码 moveUpHandle(index, row) { if (index > 0) { const param = {} param.number1 = row.id param.number2 = this.log[index - 1].id this.log[index - 1].number = param.number1
bootstrap-table 上移 下移
bootstrap-table 上移 下移 页面代码： '<a onclick="upMove(event)" href="#." title="Up">','<i>上移</i>','</a> ','<a onclick="downMove(event)" href="#." title="Down">','<i >下移&l...
Web 开发

81,094

社区成员

341,711

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章