<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>实现行列内容的交换</TITLE>
<style>
td {
width: 20%;
height: 20px;
border-bottom: 1px solid black;
border-right: 1px solid black;
cursor: default;
}
div {
font-size: 13px;
}
th {
height: 20px;
font-size: 12px;
font-weight: normal;
border-bottom: 2px solid black;
background-color: #CCCCCC
}
table {
border: 1px solid black;
font-size: 13px;
}
</style>
<script type="text/javascript">
(function(bool) {
function setInnerText(o, s) {
while(o.childNodes.length != 0) {
o.removeChild(o.childNodes[0]);
}
o.appendChild(document.createTextNode(s));
}
function getInnerText(o) {
var sRet = "";
for(var i = 0; i < o.childNodes.length; i++) {
if(o.childNodes[i].childNodes.length != 0) {
sRet += getInnerText(o.childNodes[i]);
}
if(o.childNodes[i].nodeValue) {
if(o.currentstyle.display == "block") {
sRet += o.childNodes[i].nodeValue + "\n";
} else {
sRet += o.childNodes[i].nodeValue;
}
}
}
return sRet;
}
if(bool) {
HTMLElement.prototype.__defineGetter__("currentstyle", function() {
return this.ownerDocument.defaultView.getComputedstyle(this, null);
});
HTMLElement.prototype.__defineGetter__("innerText", function() {
return getInnerText(this);
})
HTMLElement.prototype.__defineSetter__("innerText", function(s) {
setInnerText(this, s);
})
}
})(/Firefox/.test(window.navigator.userAgent));
//-->
</script>
<script language="javascript">
if(window.addEventListener) {
FixPrototypeForGecko();
}
function FixPrototypeForGecko() {
HTMLElement.prototype.__defineGetter__("runtimestyle", element_prototype_get_runtimestyle);
window.constructor.prototype.__defineGetter__("event", window_prototype_get_event);
Event.prototype.__defineGetter__("srcElement", event_prototype_get_srcElement);
Event.prototype.__defineGetter__("fromElement", element_prototype_get_fromElement);
Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement);
//added by Dumbbell Yang at 2013-11-14
Event.prototype.__defineGetter__("x", element_prototype_get_x);
Event.prototype.__defineGetter__("y", element_prototype_get_y);
}
function element_prototype_get_runtimestyle() {
return this.style;
}
function window_prototype_get_event() {
return SearchEvent();
}
function event_prototype_get_srcElement() {
return this.target;
}
//added by Dumbbell Yang at 2013-11-14
function element_prototype_get_x() {
return this.pageX;
}
function element_prototype_get_y() {
return this.pageY;
}
function element_prototype_get_fromElement() {
var node;
if(this.type == "mouseover") node = this.relatedTarget;
else if(this.type == "mouseout") node = this.target;
if(!node) return;
while(node.nodeType != 1)
node = node.parentNode;
return node;
}
function element_prototype_get_toElement() {
var node;
if(this.type == "mouseout") node = this.relatedTarget;
else if(this.type == "mouseover") node = this.target;
if(!node) return;
while(node.nodeType != 1)
node = node.parentNode;
return node;
}
function SearchEvent() {
if(document.all) return window.event;
func = SearchEvent.caller;
while(func != null) {
var arg0 = func.arguments[0];
if(arg0 instanceof Event) {
return arg0;
}
func = func.caller;
}
return null;
}
</script>
<script language="javascript">
// 修改代碼使之兼容firefox，chrome，safari和opera
/*--------全局变量-----------*/
var dragedtable_x0, dragedtable_y0, dragedtable_x1, dragedtable_y1;
var dragedtable_movable = false;
var dragedtable_preObj = null;
var dragedtable_normalColor = null;
//起始单元格的颜色
var dragedtable_preColor = "lavender";
//目标单元格的颜色
var dragedtable_endColor = "#FFCCFF";
var dragedtable_movedDiv = "dragedDiv";
var dragedtable_tableId = "";
//added by Dumbbell Yang at 2013-10-28
var dragedRow = false;
var drop2Cell = null;
var restoreSequence = true;
var otable = null;
/*--------全局变量-----------*/
function Dragedtable(tableId) {
Dragedtable(tableid, false);
}
function Dragedtable(tableId, _dragedRow) {
dragedtable_tableId = tableId;
//added by Dumbbell Yang at 2013-10-28
dragedRow = _dragedRow;
var oTempDiv = document.createElement("div");
oTempDiv.id = dragedtable_movedDiv;
oTempDiv.onselectstart = function() {
return false
};
oTempDiv.style.cursor = "hand";
oTempDiv.style.position = "absolute";
oTempDiv.style.border = "1px solid black";
oTempDiv.style.backgroundColor = dragedtable_endColor;
oTempDiv.style.display = "none";
document.body.appendChild(oTempDiv);
document.getElementById(tableId).onmousedown = showDiv;
}
//得到控件的绝对位置
function getPos(cell) {
var pos = new Array();
var t = cell.offsetTop;
var l = cell.offsetLeft;
while(cell = cell.offsetParent) {
t += cell.offsetTop;
l += cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
//显示图层
function showDiv() {
var obj = event.srcElement;
var pos = new Array();
//获取过度图层
var oDiv = document.getElementById(dragedtable_movedDiv);
if(obj.tagName.toLowerCase() == "td") {
obj.style.cursor = "hand";
//added by Dumbbell Yang at 2013-10-28
if(dragedRow) {
obj = obj.parentNode;
}
pos = getPos(obj);
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight;
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
dragedtable_x0 = pos[1];
dragedtable_y0 = pos[0];
dragedtable_x1 = event.clientX;
dragedtable_y1 = event.clientY;
//记住原td
dragedtable_normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = dragedtable_preColor;
dragedtable_preObj = obj;
dragedtable_movable = true;
}
}
function dragDiv() {
if(dragedtable_movable) {
var oDiv = document.getElementById(dragedtable_movedDiv);
var pos = new Array();
oDiv.style.top = event.clientY - dragedtable_y1 + dragedtable_y0;
oDiv.style.left = event.clientX - dragedtable_x1 + dragedtable_x0;
otable = document.getElementById(dragedtable_tableId);
for(var i = 0; i < otable.rows.length; i++) {
for(var j = 0; j < otable.rows[i].cells.length; j++) {
var curCell = otable.rows[i].cells[j];
if(curCell.tagName.toLowerCase() == "td") {
pos = getPos(otable.rows[i].cells);
//firefox 的event沒有x和y，要用pageX和pageY代替
//var mX = event.x ? event.x : event.pageX;
//var mY = event.y ? event.y : event.pageY;
var mX = event.x;
var mY = event.y;
if(mX > pos[1] && mX < pos[1] + curCell.offsetWidth &&
mY > pos[0] && mY < pos[0] + curCell.offsetHeight) {
if(dragedRow) {
if(curCell.parentNode != dragedtable_preObj)
curCell.style.backgroundColor = dragedtable_endColor;
} else {
if(curCell != dragedtable_preObj)
curCell.style.backgroundColor = dragedtable_endColor;
}
} else {
if(dragedRow) {
if(c
评论0
最新资源