js 表格拖拽效果实例代码 (IE only)

Table Test (I.E. Only)

/*得到表格列*/
function getCols(srcCellIndex,obj) {
obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
var s = '';

s += '

'
s += obj.rows[0].cells[srcCellIndex].innerHTML + '

';

for(var i = 1;i

' + obj.rows[i].cells[srcCellIndex].innerHTML + '

';
}
return s;
}
/*得到表格*/
function getTable(obj) {
while(obj.tagName.toLowerCase() != 'table') {
obj = obj.parentElement;
}
return obj;
}

/*交换列*/
function swapCol(srcCellIndex,destCellIndex,obj) {
obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
for(var i = 0;i ' + getCols(startEl.cellIndex,getTable(startEl)) + '

';
div.style.left = getObjPos(startEl).x + 'px';
div.style.top = getObjPos(startEl).y + 'px';
div.style.display = 'block';

var isDragable = true;
var curX = getCurPos().x;
var curY = getCurPos().y;
var objX = getObjPos(div).x;
var objY = getObjPos(div).y;

div.onmousemove = function() {
if(isDragable) {
div.style.cssText += 'cursor:move;';
div.style.left = getCurPos().x - curX + objX + 'px';
div.style.top = getCurPos().y - curY + objY + 'px';
}
}

div.onmouseup = function() {
isDragable = false;
div.style.display = 'none';
var endEl = getThEl();
if(typeof endEl === 'undefined') {
return;
}
var srcCellIndex = startEl.cellIndex;
var destCellIndex = endEl.cellIndex;
swapCol(srcCellIndex,destCellIndex,getTable(endEl));
}
/*鼠标移除层，事件取消*/
div.onmouseout = function() {
isDragable = false;
div.style.display = 'none';
return;
}
}

body
{
overflow: hidden;
}
.Shadow
{
color: #FC8331;
width: 100%;
padding: 3px;
font-family: Arial, "宋体";
font-size: 12px;
font-weight: normal;
line-height: 22px;
border-collapse: collapse;
border-right: 1px solid #0000;
border-top: 1px solid #0000;
border-left: 1px solid #0000;
border-bottom: 1px solid #0000;
}
.Grid
{
background-color: #ffffff;
padding: 3px;
font-family: Arial, "宋体";
font-size: 12px;
font-weight: normal;
line-height: 22px;
color: #494949;
text-decoration: none;
border-collapse: collapse;
border-right: 1px solid #2A8CBF;
border-top: 1px solid #2A8CBF;
border-left: 1px solid #2A8CBF;
border-bottom: 1px solid #2A8CBF;
}
.GridHeader
{
font-family: Arial, "宋体";
font-size: 12px;
font-weight: bold;
line-height: 23px;
border: 1px solid #77ABF2;
height: 25px;
text-decoration: none;
text-align: center;
white-space: nowrap;
color: #000000;
}

姓名	性别	年龄
周周	F	20
达达	M	21
黄宏	M	12

(function() {
var ths = document.getElementsByTagName('th');
for(var i = 0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]