表格列的移动实现04
Posted lazyli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格列的移动实现04相关的知识，希望对你有一定的参考价值。
拖动标题列，放在所要放的位置：列与列互换位置：
<html>
<head>
<title>拖拽</title>
<script type="text/javascript" src="./jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function ()
$("#callGrid td").on("dragover",function(e)
e.originalEvent.preventDefault();
);
//拿起
$("#callGrid td").on("dragstart",function(e)
e.originalEvent.dataTransfer.setData("obj_add",e.currentTarget.cellIndex);
);
//放下
$("#callGrid td").on("drop",function(e)
e.originalEvent.preventDefault;
var i = parseInt(e.originalEvent.dataTransfer.getData("obj_add"));//所拿起的th列下标
var d = this.cellIndex;//被放入的列下标
var _t = this;
$("#callGrid tr>th").each(function()
var j = this;
if(j.cellIndex == i)
_t.before(j);
return false;
);
$("#callGrid tbody>tr").each(function()
var drag = "";//拿起的td
var drop = "";//放下的td
$(this).children().each(function()
if(this.cellIndex == i)
drag = this;
if(this.cellIndex == d)
drop = this;
);
if(drag != undefined && drop != undefined && drag != "" && drop != "")
drop.before(drag);
);
);
)
</script>
</head>
<body>
这个列子是表格拖拽功能的实现，如果标题是th形式表达，那么上面js的$("#callGrid td")
、$("#callGrid td"、$("#callGrid td")换成("#callGrid tr>th形式就可")
<table id="callGrid" algin="center" >
<tr>
<td draggable="true">序号</td>
<td draggable="true">姓名</td>
<td draggable="true">年龄</td>
</tr>
<tr>
<td name="id">1</td>
<td name="name">张三</td>
<td name="age">20</td>
</tr>
</table>
</body>
</html>
以上是关于表格列的移动实现04的主要内容，如果未能解决你的问题，请参考以下文章
表格列 (td) 中的 CSS：向右对齐但向左移动并使用填充
若依vue实现动态表格，可动态查询条件，控制列的显示隐藏及操作权限
若依vue实现动态表格，可动态查询条件，控制列的显示隐藏及操作权限